在其他组件（无父子）关系发生更改后触发一个组件

Question

一旦我在 cites.component.ts 中进行更改，我想触发 Analysis.component.ts 中的更改

navigation.service.ts

@Injectable()
export class NavigationService {
  private updateBreadcrumb$: BehaviorSubject<any> = new BehaviorSubject('');
  breadcrumbObs = this.updateBreadcrumb$.asObservable();
  constructor() {}

  setBreadcrumb(value: any) {
    this.updateBreadcrumb$.next(value);
  }
}

cites.component.ts

@Component({
  selector: 'cites',
  templateUrl: './cites.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CitesComponent {
 constructor(public navigation: NavigationService)
 {}
 private displayProgress(process: Promise<any>, message: string) {
    return process.then(() => {
      this.navigation.setBreadcrumb(true);
    }).catch((error: Error) => console.error(error))
 }
}

analysis.component.ts

@Component({
  selector: 'analysis',
  templateUrl: 'analysis.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AnalysisComponent {
 constructor(private navigation: NavigationService) {
  this.navigation.breadcrumbObs?.subscribe((data: any) => {
     if (data) {
       this.createBreadcrumbs();
     }
  })

  createBreadcrumbs() {
      //logic
  }

 }
}

我希望 AnalysisComponent 能够在我订阅 BehaviourSubject 并且数据为真时检测到更改。 如果我在 AnalysisComponent 中将 ChangeDetectionStrategy 保留为默认值，它就可以工作，但我想保留 ChangeDetectionStrategy.OnPush 以提高性能。

我是 Angular 的新手，所以请帮助我解决这个问题。

Answer 1

因为您不匹配触发更改检测的两个条件

OnPush

推送文档

使用 OnPush OnPush 更改检测指示 Angular 仅在以下情况下对组件子树运行更改检测：

• 子树的根组件接收新输入作为模板绑定的结果。 Angular 使用 ==
比较输入的当前值和过去值
• Angular 会处理子树的根组件或其任何子组件中的事件（例如使用事件绑定、输出绑定或 @HostListener ），无论它们是否使用 OnPush 更改检测。

您可以在@Component装饰器中将组件的变化检测策略设置为OnPush：

请将代码修改为

@Component({
  selector: 'cites',
  templateUrl: './cites.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CitesComponent {
 constructor(public navigation: NavigationService, private changeDetectorRef: ChangeDetectorRef)
 {}
 private displayProgress(process: Promise<any>, message: string) {
    return process.then(() => {
      this.navigation.setBreadcrumb(true);
      this.changeDetectorRef.detectChanges(); // make change detection fire manually! you can also use this.changeDetectorRef.markForCheck();
    }).catch((error: Error) => console.error(error))
 }

参考资料：

更改检测参考 - 角度