Angular 2：如何從一個組件傳遞值以刷新更改檢測的另一個組件？

因此，我使用ng2-bootstrap typeahead作爲我擁有的搜索字段。當我選擇返回的值時，我希望它使用來自所選項目的詳細信息來刷新下面的窗格。Angular 2：如何從一個組件傳遞值以刷新更改檢測的另一個組件？

在我父組件，我有這樣的：

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>

打字稿：

public onSelectSearchValue(e: TypeaheadMatch): void { 
    this.chipFamilyId = e.item.id; 
}

它怎麼說，我通過這個值回來從預輸入到我的組件處理對服務的調用以查找細節並將其放入<router-outlet>？使用更改檢測似乎不起作用。

我的孩子組成如下：

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> 
...

打字稿：

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 
     ); 
    } 
}

來源

2016-11-16 occasl

@Input（）用於直接父子組件之間的通信。就你而言，你的中間有''，所以標籤不再相關。相反，您應該使用通用服務和「Subject」來在單獨的組件中觸發更改事件。 –

參見https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service –

從Harry_Ninh的指教，這裏就是我想出了允許之間的通信不使用@Input和任何組件選擇器的組件：

在我的服務，我添加了一個主題，讓父母宣佈了搜索被提出：

@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); 
    }

在我父組件，我只是做了公告，從我的預輸入字段被選中後的結果：

public onSelectSearchValue(e: TypeaheadMatch): void { 
    this.chipFamilyService.announceSearch(e.item.id); 
}

在我的孩子組成部分，我訂閱的公告，然後根據在構造新的數據更新模型：

@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 
       ); 
      }); 

    }

這實現了使用基於鍵入頭搜索的新數據更新查看面板的期望結果。

來源

2016-11-16 23:30:17 occasl

Angular 2：如何從一個組件傳遞值以刷新更改檢測的另一個組件？

回答

相關問題