Question

我目前在更新DOM中的值时遇到了问题。

为了尽快解释它，我目前有两个组件（A和B）。 B继承自A，使用A的视图作为模板，但也将其模板注入A（ng-content），因此B的视图如下：

<A>
   <template>
      <div *ngFor="let item of items" (click)="selected($event, item)">
          <span>{{item.name}}<span>
      </div>
   </template>
</A>

A的观点如下：

<ng-content select="template"></ng-content>
<div *ngIf="searching">Hey I'm looking for answer</div>
<div *ngIf="!searching">I already have my answer</div>

组件B只有一个私有变量，它是项目数组，A组件有一个由B调用的特定方法，它是：

private searching: boolean = true;

selected(event, value: any): void {
   event.stopPropagation();
   this.searching = false; // This.searching is updated in component but not in DOM
   this.selectedItem = value; // BUT this.selectedItem is updated in component AND in DOM !!
}

更改this.selectedItem有效，但是this.searching不会因为搜索始终为TRUE而显示“是”。

这是plunkr。

有人可以开导我吗？谢谢。

Answer 1

根据我的评论，父类中的方法可以在子类中使用，因此它可以工作，与您编码不同。我不了解有关typescript extends和ng-content的更多信息。您最好需要参考extends的{{1}} ng-content功能和范围。

<template-example>

Answer 2

对于那些可能感兴趣的人......我终于找到了答案，感谢@ k11k2和@Hareesh（我终于理解了你的答案）谁启发了我，但这并不完全是因为延伸。 - 谢谢。

扩展只是从一开始就混淆了我的想法。在我的示例中，我在组件B（app-inheritent）中实例化了组件A（my-app）。由于扩展，我认为组件A和B将共享相同的变量和相同的上下文，但他们绝对不会

在调用组件B时，我们已经有一个上下文，并且在用A扩展后者时，这两个组件共享相同的结构。

但是，B本身正在呼叫A，所以我们得到了另一个上下文。 A具有与B相同的结构，但它们不以任何方式相关。

当我调用所选函数时，B实际上调用了它的PARENT选择方法而不是实例化A组件的函数！

所以，正如@Hareesh所说，我们现在有多个组件。改变价值的唯一方法是让他们彼此之间进行沟通。

angular2 - ngIf值未在DOM

2 个答案: