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

<强>更新

在审阅您的评论之后，除了尝试使用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
      }
    }
  }
}

我认为问题的一部分是解决问题的方法。你提到一个＆＃34;父母＆＃34;组件正在调用＆＃34; LoadExtractorQueueDetails（）＆＃34;方法。这意味着您展示的组件是＆＃34; Child＆＃34;零件。这也意味着你以某种方式打电话给孩子＆＃34;来自＆＃34; Parent＆＃34;的方法，这是事情变得奇怪的地方。我想你可以做到，但我认为ChangeDetection因为这种方法而分崩离析。

我确定您有这种方法的原因，因此如果您计划使用当前的实现，我会使用ChangeDetectorRef对象。我相信你会想要使用＆＃34; markForCheck（）＆＃34; ChangeDetectorRef的方法，您可能需要更改＆＃34; changeDetection＆＃34;你的@Component声明中的元属性使用＆＃34; ChangeDetectionStrategy.OnPush＆＃34;。我担心，尽管其他事情可能会因为这种方法而出错。

而不是试图打电话给孩子＆＃34;来自＆＃34; Parent＆＃34;的方法，我会改为利用@Input装饰器并直接从＆＃34; Parent＆＃34;传递数据。组件进入＆＃34; Child＆＃34;成分

另一种方法是移动你的孩子＆＃34;方法进入服务并使用服务中的Observable。然后订阅子组件中的Observable。如何执行此操作的良好起点可以在here找到。

另外作为旁注，如果您提供的示例实际上是＆＃34; Child＆＃34;组件，我建议不要使用＆＃34;提供商＆＃34;您孩子＆＃34;中的元属性＆＃34;。您想使用＆＃34;提供商＆＃34;最高级别组件的元属性。然后子组件将通过子组件构造函数通过Dependency Inject传递引用，详细信息为here。你唯一应该使用＆＃34;提供商＆＃34;如果您想要多次实例化您的服务，则子项中的元属性。

如何强制重新加载/刷新组件视图？

1 个答案: