如何强制reload/refresh组件视图？

Question

在我的应用程序中，我有一个硬编码的 json 对象。该值与视图中的输入控件绑定。但是如果我在某些事件中更改 json 对象的值，那么这些更改值不会反映在 view/input 控件中？我如何强制 reload/refresh 视图？

请看下面的组件。因为我在构造函数中分配的值在组件加载期间反映在视图中。基于父组件上的一些事件，方法 LoadExtractorQueueDetails() 被调用并且同一个变量 this.sampleData 被重置为一些其他值。

理想情况下，我希望这些值反映在视图中吗？但这似乎没有发生？为什么它没有发生？我如何 reload/refresh 观看次数？

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

更新

查看您的评论后，除了尝试使用 ChangeDetectorRef object，我认为可能还有另一种可能性值得尝试。如果您希望它由不在当前组件内的点击事件驱动，您可以注册该组件以侦听外部点击事件，然后查看是否单击了 DOM object是 parent 到 child 组件。如果是，则组件函数将触发。示例 plunker here。

在此示例中，我假设您的 Child 组件只是 Parent 组件行中的一个 DOM object。这利用了 ViewChild object and the HostListener object。事件函数代码的核心是过滤到您要查找的事件。

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()" 方法。这意味着您显示的组件是 "Child" 组件。这也意味着您以某种方式从 "Parent" 调用 "Child" 方法，这就是事情变得奇怪的地方。我猜你可以做到，但我认为 ChangeDetection 正因为这种方法而分崩离析。

我相信您有采用这种方法的原因，所以如果您打算使用当前的实现，我会使用 ChangeDetectorRef Object。我相信你会想要使用“ ChangeDetectorRef 的 markForCheck()" 方法，您可能必须更改 @Component 声明中的 "changeDetection" 元属性以使用 "ChangeDetectionStrategy.OnPush"。我担心其他事情可能会出错，因为虽然这种方法一般。

我不会尝试从 "Parent" 调用 "Child" 方法，而是利用 @Input 装饰器并将数据直接从 "Parent" 组件传递到"Child" 组件。

另一种方法是将您的 "Child" 方法移动到服务中并在服务中使用 Observable。然后在 Child 组件中订阅 Observable。 here.

可以找到如何执行此操作的一个很好的起点

另请注意，如果您提供的示例确实是一个 "Child" 组件，我建议不要在您的 "Child" 中使用 "providers" 元属性。您想在最高级别的组件上使用 "providers" 元属性。然后 Child 组件将通过依赖注入通过 Child 组件构造函数传递引用，详细信息 here。你应该在 child 中使用 "providers" 元属性的唯一时间是你想要你的服务的多个实例化。

如何强制reload/refresh组件视图？

how to reload/refresh the component view forcefully?

angular2-directives

angular