Angular : 计时器被变化检测破坏

Question

我的问题在于这两行Angular代码：

<div *ngIf="timer$ | async as timer"> {{timer}}</div>
<ng-katex-paragraph [paragraph]="formula"></ng-katex-paragraph>

第一行是一个简单的计时器，每 100 秒刷新一次。第二行是第三方库（"ng-katex"），显示一个数学公式（来自字符串formula）

问题：每次计时器刷新时，公式也会刷新（如：重新生成），需要时间。结果，计时器变慢了。

如果我可以控制 Katex 库，我会在其中将 changeDetectionStrategy 设置为 "onPush"，但是 Katex 是第三方库，所以我怎么能强制它 not 刷新 ?

感谢您的帮助！这是一个最小的复制：https://stackblitz.com/edit/angular-vafchf

塞尔

Answer 1

最简单的解决方案是将公式组件包装成它自己的组件，并将其更改检测策略设置为ChangeDetectionStrategy.OnPush，如下所示：

// wrap the base component into an onpush.
@Component({
  selector: "my-formula",
  template: `<ng-katex-paragraph [paragraph]="paragraph">
             </ng-katex-paragraph>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyFormulaComponent {
  @Input("paragraph")
  paragraph: string = '';
}

并更改您的组件 html 以像这样使用它：

<div *ngIf="timer$ | async as timer"> {{timer}}</div>
<my-formula [paragraph]="formula"></my-formula>

不要忘记将新组件注册到您的 AppModule:

@NgModule({
  imports:      [ BrowserModule , KatexModule ],
  declarations: [ AppComponent, MyFormulaComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

不用说，你必须自己管理公式的推送策略，使用changeDectorRef，参见：https://angular.io/api/core/ChangeDetectorRef

Angular : 计时器被变化检测破坏

Angular : timer broken by change detection

angular2-changedetection

angular