角2，孩子對父母和回到孩子溝通

我是Angular 2的新手，我想了解如何解決這個問題。

組成結構：

<parent-component> 
    <dynamic-button></dynamic-button> 
    <dynamic-button></dynamic-button> 
    ... 
</parent-component>

子組件

export class DynamicButtonComponent { 
    @Output() clicked: EventEmitter<any> = new EventEmitter<any>(); 

    loading: Boolean = false; 
    handleClick(event: any) { 
    this.loading = true; 
    this.clicked.emit(event); 
    } 
};

當我點擊動態按鈕，我發送事件給父。使用'加載'變量將在按鈕旁邊顯示一個微調框。 Parent然後進行API調用，當API調用完成時，我想從父項（它最初發送事件）將一個道具發回到Child組件，以停止顯示微調器。

請告知什麼是最好的/最乾淨的方法來解決這個問題。我想回到事件發射器，但我在StackOverflow中讀到它違反了Angular 2的原理

來源

2017-02-13 Bobin Varghese

什麼勢必將在您的API的更新父的對象的@input屬性：鑑於

export class DynamicButtonComponent implements OnChanges{ @Input() loadingDone = false; ngOnChanges(){ if(loadingDone){ //Execute } } }

綁定回電話？ https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child – elvin

您通常使用服務在組件之間共享狀態。下面是一個代碼大綱，用於實現您所描述的微調服務：http://stackoverflow.com/a/42041945 – AngularChef

@AngularFrance首先感謝您的回覆。在我的場景中，每個按鈕都可以有一個微調組件，它們是否都會訂閱相同的服務？ –

您可以使用OnChanges生命週期鉤子來捕獲子組件上的@Input更新以取得進展。

家長：

export class ParentComponent { 
    finishedLoading: boolean = false; 
    doApiWork(){ 
     ... 
     finishedLoading = true; 
    } 
}

兒童：

<parent-component> 
    <dynamic-button [loadingDone]="finishedLoading"></dynamic-button> 
    ... 
</parent-component>

來源

2017-02-13 19:02:42 chrispy

這是我最初的想法，但我對這種方法有幾個問題， 1.輸入loadingDone將被髮送到所有DynamicButton組件，當它更新爲true時，您如何只將它發送給相關組件，或者如何執行你讓不相關的人忽略它。 2.如果沒有觸發所有DynamicButton組件的重新渲染，您如何恢復finishedLoading爲 –

@BobinVarghese如果您有靜態數量的DynamicButton組件，那麼您可以使用一個位數組來保存每個組件的狀態。如果它們是使用* ngFor以編程方式生成的，則可以使用循環的索引來做出邏輯決策。 – chrispy

角2，孩子對父母和回到孩子溝通

回答

相關問題