[英]Angular 2: How to pass value from one component to refresh another component on change detection?
So I'm using ng2-bootstrap typeahead for a search field that I have. 所以我正在使用ng2-bootstrap typeahead作为搜索字段。 When I select a value returned, I want it to refresh the pane below with the details that come from the selected item.
选择返回的值时,我希望它使用来自所选项目的详细信息刷新下面的窗格。
In my parent component, I have this: 在我的父组件中,我有这个:
HTML: HTML:
<input [(ngModel)]="asyncSelected"
[typeahead]="dataSource"
(typeaheadLoading)="changeTypeaheadLoading($event)"
(typeaheadNoResults)="changeTypeaheadNoResults($event)"
(typeaheadOnSelect)="onSelectSearchValue($event)"
[typeaheadOptionsLimit]="7"
[typeaheadMinLength]="3"
[typeaheadWaitMs]="500"
[typeaheadOptionField]="'name'"
name="searchField"
class="form-control" style="width: 250px;" placeholder="Search Chip Families">
...
<div class="container-fluid">
<router-outlet></router-outlet>
</div>
TypeScript: 打字稿:
public onSelectSearchValue(e: TypeaheadMatch): void {
this.chipFamilyId = e.item.id;
}
How is it that I pass this value that comes back from the typeahead to my component that handles the call to the service to lookup the details and place it in the <router-outlet>
? 我如何将从预输入返回的值传递给处理对服务的调用的组件,以查找详细信息并将其放置在
<router-outlet>
? Using change detection didn't seem to work. 使用变更检测似乎无效。
My child component is as follows: 我的孩子部分如下:
HTML: HTML:
<div class="content" *ngIf='chipFamilies && chipFamilies.length'>
<ol class="breadcrumb">
<li><a [routerLink]="['/home']">Home</a></li>
<li><a [routerLink]="['/chipFamily']">{{chipFamilies.Hierarchy}}</a></li>
<li class="active">{{chipFamilies.Name}}</li>
</ol>
<h2>{{chipFamilies.Hierarchy}}</h2>
...
TypeScript: 打字稿:
export class ChipFamilyComponent implements OnInit, OnChanges {
errorMessage: string;
@Input() chipFamilyId: number = 11223;
chipFamilies: IChipFamily[];
constructor(private _adminService: ChipFamilyService) {
}
ngOnInit(): void {
//Initially load 11223 on load
this._adminService.getChipFamily(this.chipFamilyId).subscribe(
chipFamilies => this.chipFamilies = chipFamilies,
error => this.errorMessage = <any>error
);
}
ngOnChanges(changes:{[propKey: string]: SimpleChange}) {
debugger;
this._adminService.getChipFamily(this.chipFamilyId).subscribe(
chipFamilies => this.chipFamilies = chipFamilies,
error => this.errorMessage = <any>error
);
}
}
From Harry_Ninh 's excellent suggestion, here's what I came up with to allow communication between components without using a @Input and any component selectors: 根据Harry_Ninh的出色建议,这是我想出的允许组件之间通信的方法,而无需使用@Input和任何组件选择器:
In my service, I added a subject to allow the parent to announce that a search was made: 在我的服务中,我添加了一个主题,以允许家长宣布已进行搜索:
@Injectable()
export class ChipFamilyService {
private searchStringSubject = new Subject<string>();
private _searchUrl = 'http://localhost:8888/chipfamily/';
constructor(private _http: Http) {
}
searchAnnounced$ = this.searchStringSubject.asObservable();
announceSearch(searchValue: string) {
this.searchStringSubject.next(searchValue);
}
In my parent component, I just made the announcement after the result was selected from my typeahead field: 在我的父组件中,我是从预输入字段中选择结果后才宣布的:
public onSelectSearchValue(e: TypeaheadMatch): void {
this.chipFamilyService.announceSearch(e.item.id);
}
In my child component, I subscribe to the announcement and then update the model based on the new data in the constructor: 在我的子组件中,我订阅了公告,然后根据构造函数中的新数据更新模型:
@Component({
template: require('./chip-family.component.html')
})
export class ChipFamilyComponent implements OnInit {
errorMessage: string;
chipFamilyId: number = 11223;
chipFamilies: IChipFamily[];
private gridOptions:GridOptions;
subscription: Subscription;
constructor(private chipFamilyService: ChipFamilyService) {
this.subscription = chipFamilyService.searchAnnounced$.subscribe(
chipFamilyId => {
this.chipFamilyId = Number(chipFamilyId);
this.chipFamilyService.getChipFamily(this.chipFamilyId).subscribe(
chipFamilies => this.chipFamilies = chipFamilies,
error => this.errorMessage = <any>error
);
});
}
This achieves the desired result of the view panel updating with the new data based on the typeahead search. 这样可以基于预输入搜索使用新数据更新视图面板,从而获得理想的结果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.