wie Inhalte einer Komponente zu einer anderen Komponente passieren in Winkel 2

Question

app.module.ts Master-Komponente unter Verwendung von

@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 { 
} 

diese my-headermy-content sowohl benutzerdefinierte Tag in meinem Master app.component.ts Datei

so möchte ich weitergeben three select box Wert von my-header zu my-content Seite

1) how to do it?

2) I jeder drei Auswahlfeld verwendet Auswahlbox Wert kommt, wenn vorherige für das Aufrufen i zum Durchlassen Wert ng-Modell verwendet, aber ich einig Beispiel sah, wo von einer Komponente vorbei Wert auf eine andere Nutzung wie #sel_batch statt [(ngModel)]="sel_batch" aber dann filterPipe: ['batch', sel_batch,'term'] arbeiten nicht die mein Zustand korrekte Syntax für

Answer 1

Sie haben einen gemeinsamen Dienst erstellen, die Sie zwischenzwischen Ihrem HeaderComponent und ContentComponent und mit diesem Service geteilt kommunizieren können 210 und ContentComponent. Überprüfen Sie Component communication via a service documentation und meine Antwort für parent-child or sibling component comunication.

Nachdem Sie gemeinsamen Dienst gemacht haben, müssen Sie die Ereignisse aus HeaderComponent auf ausgewählte Drop-Down-Wertänderung emittieren, die bereits subscribe von ContentComponent so sein muss, dass Sie Ihre Funktionalität auf Basis Drop-Down-Wertänderung