Как перезагрузить/обновить компонентный вид?

Question

в моем приложении У меня есть 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" /> 

Answer 1

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

---

Я думаю, что часть проблемы является подход к вашей проблеме. Вы отмечаете, что компонент «Родительский» вызывает метод LoadExtractorQueueDetails(). Это означает, что компонент, который вы показали, является компонентом «Ребенок». Это также означает, что вы каким-то образом называете метод «Ребенок» из «Родительского», в котором все странно. Я думаю, вы могли бы это сделать, но я думаю, что ChangeDetection разваливается из-за этого подхода.

Уверен, что у вас есть причины для этого подхода, поэтому, если вы планируете использовать текущую реализацию, я бы использовал объект ChangeDetectorRef. Я считаю, что вы захотите использовать метод « markForCheck()» в ChangeDetectorRef, вам может потребоваться изменить мета-свойство changeDetection в вашем объявлении @Component, чтобы использовать «ChangeDetectionStrategy.OnPush». Однако я беспокоюсь, что другие вещи могут пойти не так из-за этого подхода в целом.

Вместо того, чтобы вызывать метод «Ребенок» из «Родительского», я вместо этого использовал бы декоратор @Input и передал данные непосредственно из компонента «Родительский» в компонент «Ребенок».

Другой подход заключается в том, чтобы переместить ваш «Детский» метод в Службу и использовать Наблюдаемый в Службе. Затем подпишитесь на Observable в своем дочернем компоненте. Хорошей отправной точкой для того, как это сделать, можно найти here.

Также как примечание, если приведенный вами пример действительно является «дочерним» компонентом, я бы рекомендовал не использовать мета-свойство «провайдеров» в вашем «Ребенке». Вы хотите использовать мета-свойство «провайдеры» на вашем компоненте самого высокого уровня. Затем дочерние компоненты передадут ссылку через Dependency Inject через конструктор дочерних компонентов, подробности here. Единственный раз, когда вы должны использовать мета-свойство «провайдеры» у ребенка, - это если вы хотите несколько экземпляров вашего Сервиса.