从父组件调用时，角度子组件变量不更新

// 子组件
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '{{ childVariable }}'
})
export class ChildComponent {
  @Input() childVariable: string;
}

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: '<app-child [childVariable]="parentVariable"></app-child>'
})
export class ParentComponent {
  parentVariable: string = 'Hello';

  // 父组件中的代码可以改变 parentVariable 的值
}

// 子组件
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '{{ childVariable }}'
})
export class ChildComponent implements OnChanges {
  @Input() childVariable: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.childVariable) {
      this.childVariable = changes.childVariable.currentValue;
    }
  }
}

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: '<app-child [childVariable]="parentVariable"></app-child>'
})
export class ParentComponent {
  parentVariable: string = 'Hello';

  // 父组件中的代码可以改变 parentVariable 的值
}

// 子组件
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-child',
  template: '{{ childVariable }}'
})
export class ChildComponent implements OnInit {
  childVariable: string;

  ngOnInit() {
    this.parentVariable.subscribe(value => {
      this.childVariable = value;
    });
  }
}

// 父组件
import { Component } from '@angular/core';
import { Observable, Subject } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: '<app-child></app-child>'
})
export class ParentComponent {
  parentVariable: Subject<string> = new Subject<string>();

  constructor() {
    // 父组件中的代码可以改变 parentVariable 的值
    this.parentVariable.next('Hello');
  }
}