각도 2 : 변경 감지시 한 구성 요소의 값을 전달하여 다른 구성 요소를 새로 고치는 방법?

Question

그래서 검색 필드에 ng2-bootstrap을 사용하고 있습니다. 반환 된 값을 선택하면 선택한 항목의 세부 정보로 아래 창을 새로 고치기를 원합니다. 내 부모 구성 요소에서

,이 있습니다

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

타이프 :

Harry_Ninh의 우수한 제안에서

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

Answer 1

, 여기에 내가 사이의 통신을 허용하도록 해낸거야 @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); 
    } 

, 난 그냥 발표했다 결과가 내 선행 입력 필드에서 선택 후 : 내 서비스에서 414,, 나는 부모가 검색되었다 발표 할 수 있도록 제목을 추가

내 아이 구성 요소에서

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

    } 

이는 달성 선행 검사를 기반으로 새 데이터로 업데이트하는보기 패널의 원하는 결과