如何检测 Angular 中的 @Input() 值何时发生变化？

Question

我有一个父组件 (CategoryComponent)、一个子组件 (videoListComponent) 和一个 ApiService。

我的大部分工作都很好，即每个组件都可以访问 json api 并通过 observables 获取其相关数据。

目前视频列表组件只获取所有视频，我想将其过滤为特定类别中的视频，我通过将 categoryId 通过@Input() 传递给孩子来实现这一点。

CategoryComponent.html

<video-list *ngIf="category" [categoryId]="category.id"></video-list>

这可行，当父 CategoryComponent 类别发生变化时，categoryId 值通过 @Input() 传递，但我需要在 VideoListComponent 中检测到这一点，并通过 APIService 重新请求视频数组（使用新的 categoryId）。

在 AngularJS 中，我会在变量上执行 $watch。处理这个问题的最佳方法是什么？

Answer 1

其实angular2+中子组件的输入发生变化时，有两种检测和作用的方式：

1. 您可以使用旧答案中也提到的 ngOnChanges() 生命周期方法：

    @Input() categoryId: string;
        
    ngOnChanges(changes: SimpleChanges) {
        
        this.doSomething(changes.categoryId.currentValue);
        // You can also use categoryId.previousValue and 
        // categoryId.firstChange for comparing old and new values
        
    }
    

文档链接：ngOnChanges,SimpleChanges,SimpleChange
Demo示例：看this plunker

1. 或者，您也可以使用 输入属性设置器，如下所示：

    private _categoryId: string;
    
    @Input() set categoryId(value: string) {
    
       this._categoryId = value;
       this.doSomething(this._categoryId);
    
    }
    
    get categoryId(): string {
    
        return this._categoryId;
    
    }

文档链接：查看here。

演示示例：查看this plunker。

您应该使用哪种方法？

如果您的组件有多个输入，那么，如果您使用 ngOnChanges()，您将在 ngOnChanges() 中一次获得所有输入的所有更改。使用这种方法，您还可以比较已更改的输入的当前值和以前的值，并采取相应的措施。

但是，如果您只想在特定的单个输入更改时执行某些操作（并且您不关心其他输入），那么使用输入属性设置器可能会更简单。但是，这种方法没有提供一种内置方法来比较更改输入的先前值和当前值（您可以使用 ngOnChanges 生命周期方法轻松地做到这一点）。

编辑 2017-07-25：在某些情况下，角度变化检测可能仍然不会触发

通常，只要父组件更改传递给子组件的数据，setter 和 ngOnChanges 的更改检测就会触发，前提是数据是 JS 原始数据类型（字符串、数字、布尔值） .但是，在以下情况下，它不会触发，您必须采取额外的措施才能使其工作。

1. 如果您使用嵌套对象或数组（而不是 JS 原始数据类型）将数据从父级传递给子级，则更改检测（使用 setter 或 ngchanges）可能不会触发，正如用户的回答中所提到的那样: muetzerich。如需解决方案，请查看here。

2. 如果您在 Angular 上下文之外（即外部）改变数据，那么 Angular 将不知道这些更改。您可能必须在组件中使用 ChangeDetectorRef 或 NgZone 来从角度感知外部变化，从而触发变化检测。参考this。

Answer 2

在您的组件中使用 ngOnChanges() 生命周期方法。

ngOnChanges 在数据绑定属性被调用后立即调用 检查并在查看和内容子项之前检查是否至少 其中一个发生了变化。

这里是Docs。

Answer 3

在函数签名中使用 SimpleChanges 类型时，我在控制台以及编译器和 IDE 中遇到错误。为防止出现错误，请在签名中使用 any 关键字。

ngOnChanges(changes: any) {
    console.log(changes.myInput.currentValue);
}

编辑：

正如 Jon 在下面指出的，在使用括号表示法而不是点表示法时，您可以使用 SimpleChanges 签名。

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}

Answer 4

@Input() set categoryId(categoryId: number) {
      console.log(categoryId)
}

请尝试使用此方法。希望这会有所帮助

Answer 5

最安全的选择是使用 @Input 参数的共享 service instead。 此外，@Input 参数不会检测复杂嵌套对象类型的变化。

一个简单的示例服务如下：

Service.ts

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

@Injectable()
export class SyncService {

    private thread_id = new Subject<number>();
    thread_id$ = this.thread_id.asObservable();

    set_thread_id(thread_id: number) {
        this.thread_id.next(thread_id);
    }

}

Component.ts

export class ConsumerComponent implements OnInit {

  constructor(
    public sync: SyncService
  ) {
     this.sync.thread_id$.subscribe(thread_id => {
          **Process Value Updates Here**
      }
    }
  
  selectChat(thread_id: number) {  <--- How to update values
    this.sync.set_thread_id(thread_id);
  }
}

---

您可以在其他组件中使用类似的实现，并且您的所有组件都将共享相同的共享值。

Answer 6

我只想补充一点，如果@Input 值不是原始值，还有另一个名为DoCheck 的生命周期钩子很有用。

我有一个数组作为Input，因此当内容更改时这不会触发OnChanges 事件（因为检查 Angular 所做的工作是“简单”且不深入，因此该数组仍然是一个数组，即使Array 上的内容已更改）。

然后我实现一些自定义检查代码来决定是否要使用更改后的数组来更新我的视图。

Answer 7

这里 ngOnChanges 将始终在您的输入属性更改时触发：

ngOnChanges(changes: SimpleChanges): void {
 console.log(changes.categoryId.currentValue)
}

Answer 8

你也可以，有一个可观察的，它触发父component(CategoryComponent)的变化，并在子组件的订阅中做你想做的事情。 (videoListComponent)

service.ts

public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);

CategoryComponent.ts

public onCategoryChange(): void {
  service.categoryChange$.next();
}

videoListComponent.ts

public ngOnInit(): void {
  service.categoryChange$.subscribe(() => {
   // do your logic
  });
}

Answer 9

此解决方案使用proxy 类并提供以下优势：

• 允许消费者利用 RXJS 的力量
• 比目前提出的其他解决方案更紧凑
• 比使用ngOnChanges() 更多typesafe

示例用法：

@Input()
public num: number;
numChanges$ = observeProperty(this as MyComponent, 'num');

实用功能：

export function observeProperty<T, K extends keyof T>(target: T, key: K) {
  const subject = new BehaviorSubject<T[K]>(target[key]);
  Object.defineProperty(target, key, {
    get(): T[K] { return subject.getValue(); },
    set(newValue: T[K]): void {
      if (newValue !== subject.getValue()) {
        subject.next(newValue);
      }
    }
  });
  return subject;
}

Answer 10

Angular ngOnChanges

ngOnChanges() 是一种内置的 Angular 回调方法，在默认更改检测器检查数据绑定属性（如果至少有一个属性发生更改）后立即调用该方法。在查看和内容之前，会检查子项。

// child.component.ts

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

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

  @Input() inputParentData: any;

  constructor() { }

  ngOnInit(): void {
  }

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

}

了解更多：Angular Docs

Answer 11

您可以在外观服务中使用BehaviorSubject，然后在任何组件中订阅该主题，并在发生事件时触发数据更改调用.next()。确保在 on destroy 生命周期钩子中关闭这些订阅。

data-api.facade.ts

@Injectable({
  providedIn: 'root'
})
export class DataApiFacade {

currentTabIndex: BehaviorSubject<number> = new BehaviorSubject(0);

}

some.component.ts

constructor(private dataApiFacade: DataApiFacade){}

ngOnInit(): void {
  this.dataApiFacade.currentTabIndex
    .pipe(takeUntil(this.destroy$))
       .subscribe(value => {
          if (value) {
             this.currentTabIndex = value;
          }
    });
}

setTabView(event: MatTabChangeEvent) {
  this.dataApiFacade.currentTabIndex.next(event.index);
}

ngOnDestroy() {
  this.destroy$.next(true);
  this.destroy$.complete();
}

Answer 12

您也可以只传递一个 EventEmitter 作为输入。不太确定这是否是最佳实践...

CategoryComponent.ts：

categoryIdEvent: EventEmitter<string> = new EventEmitter<>();

- OTHER CODE -

setCategoryId(id) {
 this.category.id = id;
 this.categoryIdEvent.emit(this.category.id);
}

CategoryComponent.html：

<video-list *ngIf="category" [categoryId]="categoryIdEvent"></video-list>

在 VideoListComponent.ts 中：

@Input() categoryIdEvent: EventEmitter<string>
....
ngOnInit() {
 this.categoryIdEvent.subscribe(newID => {
  this.categoryId = newID;
 }
}

Answer 13

基本上，两种建议的解决方案在大多数情况下都可以正常工作。 我对 ngOnChange() 的主要负面体验是缺乏类型安全性。

在我的一个项目中，我做了一些重命名，之后一些魔术字符串保持不变，当然这个错误需要一些时间才能浮出水面。

Setter 没有这个问题：您的 IDE 或编译器会让您知道任何不匹配的情况。

Answer 14

您可以使用 ngOnChanges() 生命周期方法

@Input() inputValue: string;

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['inputValue'].currentValue);
}

Answer 15

如果你不想使用ngOnChange实现og onChange()方法，你也可以通过valueChanges事件等订阅特定项目的变化。

myForm = new FormGroup({
  first: new FormControl(),
});

this.myForm.valueChanges.subscribe((formValue) => {
  this.changeDetector.markForCheck();
});

markForCheck() 是因为在此声明中使用而写的：

changeDetection: ChangeDetectionStrategy.OnPush

Answer 16

如果您正在处理使用 @Input 在父子组件之间共享数据的情况，您可以通过以下方式检测 @Input 数据更改使用生命周期方法：ngOnChanges

 ngOnChanges(changes: SimpleChanges) {
    if (!changes.categoryId.firstChange) {
      // only logged upon a change after rendering
      console.log(changes.categoryId.currentValue);
    }
  }

而且我建议您注意为子组件实施的更改策略，出于某些性能原因您应该添加 ChangeDetectionStrategy.OnPush：

示例代码：

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class VideoListComponent implements OnChanges {
  @Input() categoryId: string;