有人知道Angular中的組件分享數據的最佳方式嗎？

-1

有誰知道將某個數據從一個組件發送到另一個組件的最佳方法。這意味着，例如，如果我sumbited在我的（固定的Navbar分量）的輸入文本值時，submited值可以在另一部件被用作如果我在submited那些組分那些DATAS。有人知道Angular中的組件分享數據的最佳方式嗎？

例如，

navbar.component.html

<input [(ngModel)]="text" [ngModelOptions]="{standalone: true}" type="text"> 
    <button [routerLink]="['/search',text]" type="submit">Search</button>

searching.component.ts

this.searchterm = this.route.snapshot.params['text'];

我試圖讓navbar.compnent.html submited價值和searching.component使用它。 html的意願。

用得到它從以上網址不起作用，因爲它只是變得當searching.component呈現頁面，而不是當navbar.component.html按鈕觸發值的問題。

來源

2017-09-09 EyoelD

7共享數據的方法： - http://www.angulartutorial.net/2017/12/share-data-between-angular-components.html – Prashobh

我真的很喜歡棱角分明，但一個它的弱點是在我看來，兩個不相關的組件之間的通信。如果他們是孩子的父母，那很容易，但是否則你需要使用服務和主題。

@Injectable() 
export class SearchingService { 
    private subject = new Subject<any>(); 

    submitSearch(message: string) { 
     this.subject.next({ text: query}); 
    } 

    clearSearch() { 
     this.subject.next(); 
    } 

    getSearch(): Observable<any> { 
     return this.subject.asObservable(); 
    } 
}

然後，您可以將該服務注入到導航欄組件和搜索組件中。

當你的導航欄要提交一個查詢，它可以調用searchService.submitSearch（查詢）;

然後在你的SearchComponent你會

searchService.getSearch（）認購（查詢=> //做與查詢的東西）。

您也可以訂閱到搜索結果中的任何部件，或從任何組件提交搜索。所以它非常靈活，即使它需要一秒鐘來包裹你的頭。搜索服務是一箇中間人，它使用observables來實現它。

來源

2017-09-09 19:49:07 bgraham

查看3種方式來通信Angular組件=> https：/ /medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb –

有人知道Angular中的組件分享數據的最佳方式嗎？

回答

相關問題