问题描述
app.module.ts
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
app.component.ts
@Component({
selector: 'my-app',
templateUrl: `./app/app.components.html`,
})
export class AppComponent { }
app.components.html
app.components.html
<my-header></my-header>
<my-content></my-content>
header.components.ts
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
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
content.components.ts
@Component({
selector: 'my-content',
templateUrl: `./app/content/content.components.html`
})
export class ContentComponent {
}
这个my-header
my-content
两个自定义标签都存在于我的主 app.component.ts
文件
this my-header
my-content
both custom tag present in my master app.component.ts
file
所以我想将三个选择框
值从my-header
传递到my-content
页面
so I want to pass three select box
value from my-header
to my-content
page
1) 怎么做?
2) 我使用了三个选择框,每个选择框值在调用前一个时出现,因为我使用 ng-model 传递值,但我看到了一些示例,其中将值从一个组件传递到另一个组件,例如 #sel_batch
而不是 [(ngModel)]="sel_batch"
但随后 filterPipe: ['batch', sel_batch,'term']
不起作用哪种语法适合我的情况
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 workwhich syntax correct for my condition
推荐答案
您必须创建一个在您的 HeaderComponent
和 ContentComponent
之间共享的公共服务,并且您可以使用该服务可以在 HeaderComponent
和 ContentComponent
之间进行通信.检查通过服务文档进行组件通信 以及我对 parent 的回答-子或兄弟组件通信.
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.
在您完成公共服务后,您必须在选择下拉值更改时从 HeaderComponent
发出事件,该值需要 ContentComponent
已经subscribe
> 以便您可以根据下拉值更改执行您的功能
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
这篇关于如何使用angular 2中的主组件将一个组件的内容传递给另一个组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!