BehaviorSubject、asyncpipe和*ngIf的奇怪行为：ngOnChanges接收到理论上不可能的变化。
问题的原因在于使用 *ngIf 来将 BehaviorSubject 和 async pipe 在组件中合并使用时，会导致组件的变化检测出现问题。解决方法是使用 ng-container 来代替 *ngIf 对 BehaviorSubject 进行订阅，然后再使用 async pipe 进行数据的展示，如下所示：
组件：
@Component({
selector: 'app-test',
template: {{ show.content }} ,
})
export class TestComponent implements OnInit, OnChanges {
@Input() id: number;
show$ = new BehaviorSubject<{ title: string; content: string }>({ title: '', content: '' });{{ show.title }}
ngOnInit() { this.getData(this.id); }
ngOnChanges(changes: SimpleChanges) { if (changes['id']) { this.getData(this.id); } }
getData(id: number) {
// 根据 id 获取数据，如下为模拟数据
this.show$.next({ title: title-${id}, content: content-${id} });
}
}
父组件：
@Component({
selector: 'app-parent',
template: ,
})
export class ParentComponent {
id = 1;
constructor(private cdr: ChangeDetectorRef) {}
changeId() { this.id = 2; // 手动触发变化检测 this.cdr.detectChanges(); } }
在上述代码中，我们使用了 ng-container 标签来代替 *ngIf 对 BehaviorSubject 进行订阅，再使用 async pipe 进行数据的展示。这样就可以避免订阅的问题，同时使用 ChangeDetectorRef 的 detectChanges 方法可以手动触发变化检测，从而解