在组件中使用ngOnChanges（）生命周期方法。

ngOnChanges在数据绑定财产在检查视图和内容子项之前，如果至少其中一个已经改变了。

这是文件。

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

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

编辑：

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

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

实际上，当输入以角度2+表示的子分量发生变化时，有两种方法可以检测和处理：

您可以使用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演示示例：看看这个punker

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

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

文档链接：查看此处。

演示示例：看看这个punker。

您应该使用哪种方法？

如果您的组件有多个输入，那么，如果使用ngOnChanges（），您将在ngOnChanges（）中一次获得所有输入的所有更改。使用此方法，您还可以比较已更改的输入的当前值和先前值，并相应地采取相应的操作。

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

编辑2017-07-25：在某些情况下，角度变化检测可能仍然无法启动

通常，每当父组件更改传递给子组件的数据时，setter和ngOnChanges的更改检测都会启动，前提是数据是JS原始数据类型（字符串、数字、布尔值）。然而，在以下场景中，它不会启动，您必须采取额外的行动才能使其工作。

如果您使用嵌套对象或数组（而不是JS基元数据类型）将数据从Parent传递到Child，则更改检测（使用setter或ngchanges）可能不会启动，正如用户在回答中提到的：muetzerich。有关解决方案，请参阅此处。如果您在角度上下文之外（即外部）更改数据，那么角度将不知道这些更改。您可能必须在组件中使用ChangeDetectorRef或NgZone，以便对外部变化进行角度感知，从而触发变化检测。请参阅。

我只想补充一点，如果@Input值不是基元值，还有一个名为DoCheck的Lifecycle钩子很有用。

我有一个数组作为输入，所以当内容发生变化时，这不会触发OnChanges事件（因为Angular所做的检查是“简单”的，而且不深入，所以即使数组上的内容发生了变化，数组仍然是一个数组）。

然后，我实现了一些自定义检查代码，以决定是否要使用更改后的Array更新视图。

您还可以在父组件（CategoryComponent）中的更改时触发一个可观察值，并在子组件的子属性中执行您想要执行的操作。（视频列表组件）

服务.ts

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

类别组件.ts

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

视频列表组件.ts

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

最安全的选择是使用共享服务而不是@Input参数。此外，@Input参数不会检测复杂嵌套对象类型的更改。

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

服务.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);
    }

}

组件.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);
  }
}

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

如果不想使用ngOnChange实现og onChange（）方法，还可以通过valueChanges事件等订阅特定项的更改。

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

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

markForCheck（）writen，因为在这个声明中使用：

changeDetection: ChangeDetectionStrategy.OnPush

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

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

此处ngOnChanges将在输入属性更改时始终触发：

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

您也可以将EventEmitter作为输入传递。不太确定这是否是最佳实践，尽管。。。

类别组件：

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

- OTHER CODE -

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

类别组件.html：

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

在VideoListComponent.ts中：

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

此解决方案使用代理类并提供以下优点：

允许消费者利用RXJS的力量比目前提出的其他解决方案更紧凑比使用ngOnChanges（）更安全您可以通过这种方式观察任何类字段。

示例用法：

@Input()
num: number;
@Input()
str: number;
fields = observeFields(this); // <- call our utility function

constructor() {
  this.fields.str.subscribe(s => console.log(s));
}

实用程序功能：

import { BehaviorSubject, Observable, shareReplay } from 'rxjs';

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

export const observeFields = <T extends object>(target: T) => {
  const subjects = {} as { [key: string]: Observable<any> };
  return new Proxy(target, {
    get: (t, prop: string) => {
      if (subjects[prop]) { return subjects[prop]; }
      return subjects[prop] = observeField(t, prop as keyof T).pipe(
        shareReplay({refCount: true, buffer:1}),
      );
    }
  }) as Required<{ [key in keyof T]: Observable<NonNullable<T[key]>> }>;
};

Demo

您可以在facade服务中使用BehaviorSubject，然后在任何组件中订阅该主题，当事件发生时触发对其的数据调用.next（）的更改。请确保在销毁生命周期挂钩中关闭这些订阅。

data-api.facade.ts

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

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

}

某些组件

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

基本上，这两种建议的解决方案在大多数情况下都很好。我对ngOnChange（）的主要负面体验是缺乏类型安全性。

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

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

可以使用ngOnChanges（）生命周期方法

@Input() inputValue: string;

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

如果您正在处理使用@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;

角度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

我会坚持采用@alan-c-s建议的方法，但需要做一些修改。首先，我反对使用ngOnChanges。相反，我建议将所有需要更改的内容移到一个对象下。并使用BehaviorSubject跟踪其变化：

  private location$: BehaviorSubject<AbxMapLayers.Location> = new BehaviorSubject<AbxMapLayers.Location>(null);

  @Input()
  set location(value: AbxMapLayers.Location) {
    this.location$.next(value);
  }
  get location(): AbxMapLayers.Location {
    return this.location$.value;
  }

<abx-map-layer
    *ngIf="isInteger(unitForm.get('addressId').value)"
    [location]="{
      gpsLatitude: unitForm.get('address.gpsLatitude').value,
      gpsLongitude: unitForm.get('address.gpsLongitude').value,
      country: unitForm.get('address.country').value,
      placeName: unitForm.get('address.placeName').value,
      postalZip: unitForm.get('address.postalZip').value,
      streetName: unitForm.get('address.streetName').value,
      houseNumber: unitForm.get('address.houseNumber').value
    }"
    [inactive]="unitAddressForm.disabled"
    >
</abx-map-layer>