как передать содержание одного компонента к другому компоненту с использованием мастера-компоненты в угловом 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-headermy-content как пользовательский тег присутствует в моем мастер app.component.ts файл

, поэтому я хочу, чтобы пройти three select box Значение от my-header до my-content страница

1) how to do it?

2) Я использовал три списка выбора каждая из выберите значение коробки приходит при вызове предыдущими для этого я использовал нг-модель для передачи значения, но я видел несколько примеров, где проходит значение из одного компонента для другого использования, как #sel_batch вместо [(ngModel)]="sel_batch", но затем 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, так что вы можете выполнять ваши функции на основе изменения значения выпадающего