ngOnChanges 不会触发更改答案

【问题标题】：ngOnChanges doesn't trigger changesngOnChanges 不会触发更改
【发布时间】：2019-04-21 21:25:42
【问题描述】：

https://next.plnkr.co/edit/0LHeJ3Fyz5gdjJqQ?open=lib%2Fapp.ts&deferRun=1 这是一个笨蛋。这只是一个例子。

在实际项目中我得到了类似的东西

<input [(ngModel)]='_data.name' [name]='name' />

我使用 ngOnInit lifehook 传递一些数据以供输入
而且我不明白为什么当我在<input> 中写一些东西时我的 ngOnChanges 钩子不会触发更改

_data 通过使用服务 http 请求从 json/server 获取数据，然后我在我的 <input> 中得到 name，或者其他东西
问题是：如何在我的情况下使用 ngOnChange lifehook 检测变化
我尝试设置[name]='name'，然后像这样使用@Input

@Input() name: string;

然后在 ngOnChanges 中

ngOnChanges(changes: SimpleChanges) {
  console.log(changes.name.currentValue);
}

为什么我在控制台中看不到任何内容？为什么 ngOnChanges 不能以这种方式工作？我需要从我的输入中获取价值，然后使用 ngOnChanges 检测它的变化控制台没有错误，没有数据，什么都没有，为空

【问题讨论】：

你为什么要使用ngOnChanges？，而不是在你的输入上监听onChange、input或keyup事件

标签： angular

【解决方案1】：

那是因为两个组件之间的关系没有很好地实现。

我们应该首先处理@input() decorators are implementend only in a child component，这意味着，您必须在父组件中进行更改并将这些更改传递给子组件，以便它会调用它的@ 987654324@ 方法。也就是说：

在您的父亲组件中：

@Component({
    selector: 'my-app',
    template: `
        <div>
            <example [name]="name"></example> <!-- Here you intend to call your child -->
            <input [(ngModel)]="name"/>
        </div>
    `,
})
export class App {
    name: string;
    constructor() {
        this.name = `Angular! v${VERSION.full}`;
    }
}

然后从 Example 模板中删除 <input [(ngModel)]="name"/>。

A working stackblitz。

【讨论】：

【解决方案2】：

@input 仅用于与外部组件通信，不用于自己的模板。相反，您可以使用ngModelChange

import {Component, NgModule, OnInit, OnChanges, SimpleChanges, Input } from '@angular/core'

@Component({
  selector: 'example',
  template: `
   <input [(ngModel)]='name' (ngModelChange)="onChanges()" />
 `,
})

export class Example implements OnInit{
  private _value: string;
  name: string;

  // @Input() name: string; <--- no need

  constructor() {

  }

  ngOnInit() {
    this.name = 'qwe';
  }

  onChanges() {
    console.log(this.name);
  }


}

【讨论】：