javascript - 触发对 Angular 2 中子组件的更改，即使数据/状态没有更改

Question

我有这个父组件，它有一个 bool 属性，可以由用户通过 UI 中的按钮设置。

我有一组递归的子组件，实际上是一棵树，需要响应那个 bool 属性的变化，即使那个 bool 属性的值没有改变，但用户按下了那个按钮 。

换句话说，即使那个 bool 属性是false ，然后用户单击该按钮，并且由于某些逻辑， bool 属性根本没有更改并保持为 false。 ，我仍然希望通知子组件。

我正在使用 ngOnChanges 我是 trying to trigger the event manually .

但在 false 的情况下至 false ，这意味着没有变化，ngOnChanges不调用子组件。

我在这里错过了什么？

Answer 1

您可以将 Subject 作为输入传递给子组件。

在您的父组件中，创建一个 Subject，如下所示:

import { Component } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  subject = new Subject<string>();

  handleClick() {
    // This will send a message via the subject
    this.subject.next("TEST");
  }

  // Complete the subject when your component is destroyed to avoid memory leaks
  ngOnDestroy() {
    this.subject.complete();
  }
}

并将其传递给子组件:

<hello [notifier]="subject"></hello>

在您的子组件中，订阅 Subject，并在订阅回调中执行您需要执行的任何操作:

import { Component, Input } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() notifier: Subject<any>;

  ngOnInit() {
    if (this.notifier != null) {
      this.notifier.subscribe((event) => {
        // This will be logged every time the subject.next is called.
        console.log("HelloComponent heard", event);
      })
    }
  }
}

这是一个StackBlitz example