如何有效地重新加載/刷新組件視圖？

在我的應用程序中我有一個硬編碼的json對象。該值與視圖中的輸入控件綁定。但如果我在某些事件期間更改json對象的值，那麼這些更改值不會反映在視圖/輸入控件中？我如何強制重新加載/刷新視圖？如何有效地重新加載/刷新組件視圖？

請看下面的組件。因爲在構件的加載過程中，我在構造函數中賦值的值反映在視圖中。基於父組件上的某些事件，將調用方法LoadExtractorQueueDetails（），並將使用其他值重置相同變量this.sampleData。

理想情況下，我希望這些值能夠反映在視圖中？但這似乎並沒有發生？爲什麼沒有發生？我如何重新加載/刷新視圖？

import { Component, Input, OnInit } from '@angular/core' 
import { FORM_DIRECTIVES } from '@angular/common'; 

@Component({ 
    selector: 'extractorQueueDetails', 
    directives: [FORM_DIRECTIVES], 
    providers: [CacheDataService, HTTP_PROVIDERS], 
    templateUrl: './HTML/Admin/ExtractorQueueDetails.html' 
}) 
export class ExtractorQueueDetails { 

    resultData: ExtractorQueueItem; 
    sampleData: Sample; 

    constructor() { 
     console.log("ExtractorQueueDetails component is loaded"); 

     this.sampleData = { queueId: 123, name: "Krishnan" }; 
    } 


    public LoadExtractorQueueDetails() { 
     console.log("in LoadExtractorQueueDetails of ExtractorQueueDetails"); 

     this.sampleData = { queueId: 456, name: "Krishnan123" }; 

     console.log(this.sampleData); 
    } 
}

我的HTML模板就像下面

<input type="text" name="txtQueueID" class="form-control" id="txtQueueID" [(ngModel)]="sampleData.queueId" /> 
    <input type="text" name="Description" class="form-control" [(ngModel)]="sampleData.name" id="Description" />

來源

2016-07-25 Krishnan

UPDATE

審覈您的評論，試圖使用ChangeDetectorRef對象之外以後，我覺得可能是另一種可能值得嘗試。如果您希望將這個事件驅動爲不在當前組件內部的單擊事件，則可以註冊該組件以偵聽外部單擊事件，然後查看被單擊的DOM對象是否爲子組件的父對象。如果是，那麼組件函數會觸發。示例plunker here。

在這個例子中，我假設你的子組件只是你的父組件行中的一個DOM對象。這利用了使用ViewChild對象和HostListener對象。事件功能代碼的內容正在過濾到您正在查找的事件。

export class ChildComponent { 
    private _exampeObject:IGeneric; 
    @ViewChild('childcomponent') component: ElementRef; 

    constructor(){ 
    this._exampleObject = { 
     id:1, 
     name:"Cyrus" 
    }; 
    } 

    @HostListener('document:click', ['$event.target']) onClick(obj) { 
    let incrementId = this._exampleObject.id + 1; 
    let adjustName = this._exampleObject.name + incrementId.toString(); 
    if(this.component.nativeElement.parentNode.parentNode === obj){ 
     this._exampleObject = { 
     id: incrementId, 
     name: adjustName 
     } 
    } 
    } 
}

我認爲問題的一部分是方法對你的問題。你提到一個「Parent」組件正在調用「LoadExtractorQueueDetails（）」方法。這意味着你顯示的組件是一個「孩子」組件。這也意味着你不知何故從「Parent」調用了「Child」方法，這就是奇怪的地方。我想你可以做到這一點，但我認爲ChangeDetection正在因爲這種方法而分崩離析。我相信你有這個方法的原因，所以如果你打算使用你當前的實現，我會使用ChangeDetectorRef對象。我相信你會想要使用ChangeDetectorRef的「 markForCheck（）」方法，你可能需要改變@Component聲明中的「changeDetection」元屬性來使用「ChangeDetectionStrategy.OnPush」。儘管如此，我擔心儘管其他方面可能會因爲這種方法而出錯。

我不是試圖從「父」調用「子」方法，而是使用裝飾器@Input並直接將數據從「父」組件傳遞到「子」組件中。

另一種方法是將您的「子」方法轉換爲服務並在服務中使用Observable。然後在您的子組件中訂閱Observable。如何做到這一點的好起點可以找到here。

另外作爲一個方面說明，如果你提供的例子實際上是一個「孩子」組件，我會建議不要在你的「孩子」中使用「提供者」元屬性。您想在最高級別的組件上使用「提供者」元屬性。然後子組件將通過依賴注入通過子組件構造函數傳遞一個引用，詳細信息here。你應該在孩子中使用「提供者」元屬性的唯一時間是如果你想要你的服務的多個實例。

來源

2016-07-25 17:55:08

我的實際問題是不同的，我使用包裹在angular2中的一個kendogrid組件，在一個rowclick事件中，我需要調用這個子組件，並且我需要將rowID傳遞給子組件以使服務調用和.. 。由於ComponentResolver已被棄用，我無法找出其他可行的方法來實現這一點，由於時間限制。我同意在子組件中調用方法的方法並不是一個好的方法。如果你有更好的方法來達到我的上述要求，那麼請分享/提供我的投入..我一定會想要實施 – Krishnan

註冊。在子組件中使用提供者：因爲我需要提供一個非常特定於子組件的服務調用，所以我在這裏使用了提供者。這裏我不會有多個實例，但是應該使用基於在kendogrid/parent中單擊的行ID的新數據集刷新相同的實例視圖。 – Krishnan

@Krishnan - 我已經更新了我的回答，以反映您評論中的信息。 –

如何有效地重新加載/刷新組件視圖？

回答

相關問題