ngOnChanges不触发更改

Question

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

在真正的项目中，我得到了这样的东西

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

我使用ngOnInit生命钩子传递一些数据以供输入

我不明白为什么当我在我的ngOnChanges中写东西时，我的<input>钩子不触发更改

_data通过使用服务http请求从json/server获取数据，然后在我的<input>中获取name，或者在

问题是:如何在我的情况下使用ngOnChange生命钩子检测更改

我尝试设置[name]='name'，然后像这样使用@Input来获取它

@Input() name: string; 

然后在ngOnChanges

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

为什么我在我的控制台里什么都没看到？为什么ngOnChanges不是这样工作的？我需要从输入中获取值，然后使用ngOnChanges检测它的更改--控制台中没有错误，没有数据，只是没有，空的

Answer 1

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

首先，我们应该达成一项协议，即@input() 装饰器仅在子组件中实现。，这意味着您必须对父组件进行更改，并将这些更改传递给子组件，以便它将调用其ngOnChanges方法。这就是说：

在你父亲的组成部分中：

@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}`;
    }
}

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

https://stackblitz.com/edit/angular-n3fk4v。

Answer 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);
  }


}