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使用[(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，以便您可以执行基本功能关于下拉值改变

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

1 个答案: