Question

对于我的应用程序，我具有三个组成部分：

组件A：耦合组件B和C
组件B：包含对象的网格
组件C：当单击组件B的网格中的行时显示详细信息的表单

+---------------------+
|  A                  | 
| +------+  +-------+ |
| |  B   |  |  C    | |
| |      |  |       | |
| +------+  +-------+ |
+---------------------+

export class B{

   @Output() rowClicked= new EventEmitter<{objectOfInterest: any}>();

   public onCellClick (e){
     this.rowClicked.emit(e.dataItem);
   }
}

并且KendoUI网格已将事件绑定如下： (cellClick)="onCellClick($event)"。该事件将被正确调用，并包含被单击的行的dataItem。

在组件A的模板中，我使用以下选择器：

<B (rowClicked)='C.doStuff($event)'></B>

然后，出现C类：

export class C{
  public objectOfInterest: any = {};

  constructor(){
    this.objectOfInterest= {'name': 'blaat'};
  }

  public doStuff = (objOfInterest) => {
    this.objectOfInterest= objOfInterest;
    console.log(this.objectOfInterest.name);
  }
}

此外，console.log还会打印正确的字符串（被单击的实体的名称）。

现在出现问题：C的模板包含一个字符串插值，看起来像这样：Editting {{objectOfInterest.name}}。不管我做什么，被单击对象的名称都不会打印到屏幕上。还尝试过：

Editting {{objectOfInterest?.name}}

或

<div *ngIf="someBool">{{objectOfInterest.name}}</div>

所有结果都不令人满意。

我一直认为自己处于错误的this上下文中，但是当我处于doStuff并且执行console.log(this)时，它会输出预期的内容：objectOfInterest和doStuff方法

Answer 1

该方案似乎在这里起作用： https://plnkr.co/edit/5Mp4lDuthIJ0SgUEhG2q?p=preview

如果您使用的是OnPush更改检测策略，则此方法将无效。在这种情况下，您应该使用C组件ChangeDetectorRef.markForCheck方法或使用Input代替method并在设置器中执行任何其他逻辑：

export class C{

  public objectOfInterest: any = {};

  @Input()
  public set objOfInterest(value: any) {
    this.objectOfInterest = value;
    //do stuff
  }

}

<B (rowClicked)='objectOfInterest = $event.dataItem'></B>

<C [objOfInterest]="objectOfInterest"></C>

角度：在其他组件中插入字符串Kendo CellClickEvent

1 个答案: