親から子コンポーネントを更新

Question

layoutcomponentには親子があります。送信時に検索コンポーネントの子コンポーネントをrouter-outletからリダイレクトしています。それは私の私がサービスを共有しているし、そこインタフェースas suggested hereであり、それが動作

onSubmit({ value }: { 
    value: Search 
}) { 
    this.sharedData.searchStr = value.Search; 

    let urlSegments = this.router.url.split('/'); 

    let lang = urlSegments[1]; 

    let url = lang + '/search'; 
    this.router.navigateByUrl(url); 


    this.searchval.reset(); 
} 

を提出します。子コンポーネントで

import { Injectable, Inject } from '@angular/core'; 
export interface ISharedModel { 
    searchStr: string; 
} 
@Injectable() 
export class SearchService { 

    sharedComponent: ISharedModel = { 
     searchStr: '' 
    }; 

    constructor() { } 
} 

私はngOnInit

ngOnInit() { 
    this.sharedData = this.sharedResource.sharedComponent; 

    this.searchval = new FormGroup({ 
     Search: new FormControl(this.sharedData.searchStr) 
    }); 
} 

を持っており、それは、リダイレクトアプリケーションにそうhtmlページに

<form (ngSubmit)="onSubmit(searchval)" [formGroup]="searchval" > 
     <input type="text" placeholder="enter search string" formControlName="Search" class="form-control"> 
     <button class="btn btn-primary">search</button> 
</form> 

を持って、このテキストボックスを埋めます。 これはすでに `mydomain.com/en/search 'にあり、親コンポーネントに検索文字列を入力すると子コンポーネントが更新されません。

どうすればよいですか？

Answer 1

あなたは、共有サービスを使用することができますが、あなたはまた、ちょうどそれをスキップして、次のことを行うことができます：あなたのChildComponentで

String Subjectを宣言：

あなたChildComponentのコンストラクタで

public static yourString: Subject<String> = new Subject<string>(); 

：

YourChildComponent.yourString.subscribe(res => { 
    this.searchval.patchValue({Search: res}) 
}); 

、親の場合はkeyup - 方法：

updateValue(value) { 
    YourChildComponent.yourString.next(yourUpdated value here) 
} 

EDIT：ワーキングplunker