如何使用角度 2 中的主组件将内容一个组件传递给另一个组件

Question

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

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

app.components.html

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

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

      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

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

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

所以我想将three select box 值从my-header 传递到my-content 页面

1) how to do it?

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

Answer 1

您必须创建一个在您的HeaderComponent 和ContentComponent 之间共享的公共服务，并且使用此服务您可以在HeaderComponent 和ContentComponent 之间进行通信。检查Component communication via a service documentation 和我对parent-child or sibling component comunication 的回答。

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