如何使用angular 2中的主组件将一个组件的内容传递给另一个组件 [英] how to pass content one Component to another Component using master Component in angular 2

问题描述

app.module.ts

app.module.ts

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpModule,MyDatePickerModule ],
 declarations: [ AppComponent,HeaderComponent,
              ContentComponent,ActionComponent ,
              FacultyComponent,StudentComponent,
              filterPipe
            ],                
  providers:    [ DataService ], 
  bootstrap:    [ AppComponent ]
 })
  export class AppModule { }

app.component.ts

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: `./app/app.components.html`,
})
export class AppComponent  { }

app.components.html

app.components.html

     <my-header></my-header>
     <my-content></my-content>

header.components.ts

header.components.ts

@Component({
   selector: 'my-header',
  templateUrl: `./app/header/header.components.html`
 })
 export class HeaderComponent  {
   batchObj: Task;
   myDatePickerOptions: any;  
   constructor(private dataService: DataService) { }   
}

header.components.html

header.components.html

      Batch : <select  [(ngModel)]="sel_batch"  > <option >Select Batch</option>
                   <option *ngFor="let item of  batchObj | filterPipe: [];   ">{{item.batch}}</option>
            </select>
    Term : <select  [(ngModel)]="sel_term"> <option>Select Term</option>
     <option *ngFor="let item of batchObj | filterPipe: ['batch', sel_batch,'term'];   ">{{item.term}}</option>
     </select>           
    Section : <select  [(ngModel)]="sel_section"> <option>Select Section</option> 
     <option *ngFor="let item of batchObj | filterPipe: ['batch', sel_batch,'term',sel_term,'section'];">{{item.section}}</option>
    </select> 

content.components.ts

content.components.ts

@Component({
 selector: 'my-content',
 templateUrl: `./app/content/content.components.html`    
 })
  export class ContentComponent  { 
 }

这个my-header my-content 两个自定义标签都存在于我的主 app.component.ts 文件

this my-header my-content both custom tag present in my master app.component.ts file

所以我想将三个选择框值从my-header传递到my-content页面

so I want to pass three select box value from my-header to my-content page

1) 怎么做?

2) 我使用了三个选择框，每个选择框值在调用前一个时出现，因为我使用 ng-model 传递值，但我看到了一些示例，其中将值从一个组件传递到另一个组件，例如 #sel_batch 而不是 [(ngModel)]="sel_batch" 但随后 filterPipe: ['batch', sel_batch,'term'] 不起作用哪种语法适合我的情况

2) I used three select box each one select box value comes when calling previous for that i used ng-model for passing value but i saw some example where passing value from one component to another use like #sel_batch instead of [(ngModel)]="sel_batch" but then filterPipe: ['batch', sel_batch,'term'] not work which syntax correct for my condition

推荐答案

您必须创建一个在您的 HeaderComponent 和 ContentComponent 之间共享的公共服务，并且您可以使用该服务可以在 HeaderComponent 和 ContentComponent 之间进行通信.检查通过服务文档进行组件通信 以及我对 parent 的回答-子或兄弟组件通信.

You have to create one common service which shared between your HeaderComponent and ContentComponent and with this service you can communicate between HeaderComponent and ContentComponent. Check Component communication via a service documentation and my answer for parent-child or sibling component comunication.

在您完成公共服务后，您必须在选择下拉值更改时从 HeaderComponent 发出事件，该值需要 ContentComponent 已经subscribe> 以便您可以根据下拉值更改执行您的功能

After you have made common service you have to emit the events from HeaderComponent on select dropdown value change which needs to be already subscribe by ContentComponent so that you can perform your functionality based on dropdown value change

这篇关于如何使用angular 2中的主组件将一个组件的内容传递给另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！