how to pass content one Component to another Component using master Component in angular 2

问题:

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

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

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

1) how to do it?

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

回答1:

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.

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

文章来源: how to pass content one Component to another Component using master Component in angular 2