ngOnChanges 不显示变量中预期的更改

Question

我试图理解回调 ngOnChanges() 所以我创建了下面发布的示例。但在编译时，尽管 Post 接口分别具有其属性 title 和 content 的值，但是，我没有收到来自 ngOnChanges 的任何日志

请让我知道如何正确使用

应用程序组件.ts：

import { Component, OnInit, OnChanges, SimpleChanges,Output, EventEmitter } from '@angular/core';

export interface Post {
  title:string;
  content:string;
}

@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.css']
})
export class PostCreateComponent implements OnInit {

  @Output() post : Post;
  @Output() onPostSubmittedEvtEmitter: EventEmitter<Post> = new EventEmitter<Post>();
  constructor() { 
    this.post = {} as Post;
  }

  ngOnInit(): void {
  }
  
  ngOnChanges(changes: SimpleChanges) {
    for (let changedProperty in changes) {
      console.log("ngOnChanges->: changes[changedProperty].previousValue: " + changes[changedProperty].previousValue);
      console.log("ngOnChanges->: changes[changedProperty].currentValue):" + changes[changedProperty].currentValue);
    }
  }

  onSubmitPost(post: Post) {
    this.post = {
      title: this.post.title,
      content: this.post.content
    };
    this.onPostSubmittedEvtEmitter.emit(this.post);
    console.log("onSubmitPost->: post.title: " + post.title);
    console.log("onSubmitPost->: post.content:" + post.content);
  }

}

更新 05.04.2021

按照建议，我添加了 ngOnChanges 来观察用输入装饰器注释的属性的变化，如下所示：

@Input() postsToAddToList: Post[] = [];

现在，当我编译代码时，我添加了一些值，我从 ngOnChanges 收到以下日志：

ngOnChanges->: changes[changedProperty].previousValue: undefined
post-list.component.ts:20 ngOnChanges->: changes[changedProperty].currentValue):

但问题是，当我不断添加更多值时，我没有收到来自 ngOnChanges 的任何日志，请让我知道为什么，尽管我不断添加更多值，导致更改用 @Input 装饰的对象的内容？

post-list.component.ts：

import { Component, Input,OnInit, OnChanges, SimpleChanges,Output, EventEmitter } from '@angular/core';
import { Post } from '../post-create/post-create.component';

@Component({
  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
})
export class PostListComponent implements OnInit {

  constructor() {}

  @Input() postsToAddToList: Post[] = [];
  ngOnInit(): void {}

  
  ngOnChanges(changes: SimpleChanges) {
    for (let changedProperty in changes) {
      console.log("ngOnChanges->: changes[changedProperty].previousValue: " + changes[changedProperty].previousValue);
      console.log("ngOnChanges->: changes[changedProperty].currentValue):" + changes[changedProperty].currentValue);
    }
  }

}

Answer 1

ngOnChanges()仅当组件的输入从父组件（用@Input装饰器标记的字段）更改时才会被调用。但你有@Output田地。其想法ngOnChanges()是对父母所做的改变做出反应。

按照您的业务逻辑，您可以直接在 中处理您想要的任何内容onSubmitPost。

更新答案05.04.2021

您将值添加到数组本身。由于数组的链接没有更改，因此ngOnChanges()不会捕获这些更改。但是，如果您将新链接添加到组件并在父级中执行以下操作：

成分：

this.yourArrInTheParent = [...this.yourArrInTheParent];

模板：

<app-post-lis [postsToAddToList]="yourArrInTheParent"></app-post-lis>

现在您传递给输入的值已更改，您将在ngOnChanges(). 如果您更改对象的属性，对象也是如此，角度不会将其视为更改，ngOnChanges()因为它只检测@Input()值的更改。

为了捕获这些更改，您可以使用ngDoCheck钩子。但它很耗电，请记住不要在那里执行繁重的计算。