我有一个父组件（CategoryComponent）、一个子组件（videoListComponent）和一个ApiService。
我的大部分工作都很好，即每个组件都可以访问jsonapi，并通过可观测获取相关数据。
目前，视频列表组件只获取所有视频，我想将其过滤为特定类别中的视频，我通过@Input（）将categoryId传递给孩子来实现这一点。
类别组件.html
<video-list *ngIf="category" [categoryId]="category.id"></video-list>
这是有效的，当父CategoryComponent类别发生更改时，categoryId值将通过@Input（）传递，但我需要在VideoListComponent中检测到这一点，并通过APIService（使用新的categoryId）重新请求视频数组。
在AngularJS中，我会对变量进行$watch。处理此问题的最佳方法是什么？
当前回答
如果不想使用ngOnChange实现og onChange（）方法，还可以通过valueChanges事件等订阅特定项的更改。
myForm = new FormGroup({
first: new FormControl(),
});
this.myForm.valueChanges.subscribe((formValue) => {
this.changeDetector.markForCheck();
});
markForCheck（）writen，因为在这个声明中使用：
changeDetection: ChangeDetectionStrategy.OnPush
其他回答
实际上，当输入以角度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，以便对外部变化进行角度感知，从而触发变化检测。请参阅。
可以使用ngOnChanges（）生命周期方法
@Input() inputValue: string;
ngOnChanges(changes: SimpleChanges) {
console.log(changes['inputValue'].currentValue);
}
@Input() set categoryId(categoryId: number) {
console.log(categoryId)
}
请尝试使用此方法。希望这有帮助
您可以在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();
}
最安全的选择是使用共享服务而不是@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);
}
}
您可以在其他组件中使用类似的实现，所有组件将共享相同的共享值。
