angular2 - ngIf 值未在 DOM 中更新答案

【问题标题】：angular2 - ngIf value is not updated in DOMangular2 - ngIf 值未在 DOM 中更新
【发布时间】：2017-07-27 12:49:44
【问题描述】：

我目前在更新 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。

有人可以启发我吗？谢谢。

【问题讨论】：

你为什么使用 event.stopPropagation(); ?
能贴出完整的html和组件代码吗？
这里是 plunkr：plnkr.co/edit/DP7K5Q63kEqXmQbRA98I?p=preview
不要明白你的逻辑。你扩展了当前类app，现在你有两个组件。要在组件之间发送数据，您应该检查此link
好吧，我的组件名称不太相关，但是...关键是：我想创建一个父组件和一个子组件，它们将在特定时刻使用（例如：组件汽车和组件卡车。汽车就像卡车的指称，尽管两者之间在功能上有相似之处，但汽车与卡车不同）。我真的不想在组件之间发送数据，而是扩展父组件以仅删除其中的几个方法。

标签： javascript angular angular-ng-if

【解决方案1】：

根据我的评论，父类中的方法可以在子类中使用，因此它可以工作，不像你编码的那样。我不知道更多关于打字稿extends 和ng-content。你最好参考extendsng-content<template-example>的功能和范围。

 import {Component, NgModule} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'
    declare var searching: boolean
    @Component({
      selector: 'my-app',
      template: `<ng-content select="template-example"></ng-content>`,
    })
    export class App {
      private searching: boolean = true;
      private selectedItem: any;

      constructor(private zone:NgZone) {
      }

      selected(event, value: any) {
        event.stopPropagation();


            this.searching = !this.searching;
      console.log(this.searching);
        this.selectedItem = value;
      }
    }


    @Component({
      selector: 'app-inheritent',
      template: `
          <my-app>
            <template-example>
              <div *ngFor="let item of items" (click)="selected($event, item)">
                <a>{{item.name}}</a>
              </div>
              <div *ngIf="!searching">
                  <span>Nope.</span>
                </div>

                <div *ngIf="searching">
                  <span>Yes</span>
                </div>
            </template-example>
          </my-app>` ,
    })
    export class AppInheritent extends App {

      private items: any = [
        {name: "1"},
        {name: "2"},
        {name: "3"},
        {name: "4"},
        {name: "5"},
      ];

      constructor() {
      }


    }

    @NgModule({
      imports: [ BrowserModule ],
      declarations: [ App, AppInheritent ],
      bootstrap: [ AppInheritent ],
      schemas: [ NO_ERRORS_SCHEMA ]
    })
    export class AppModule {}

【讨论】：

【解决方案2】：

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

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

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

但是，B 本身正在调用 A，所以我们得到了另一个上下文。 A 与 B 具有相同的结构，但它们没有任何关系。

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

所以，正如@Hareesh 所说，我们现在有多个组件。改变值的唯一方法是让它们相互通信。

【讨论】：