почему мой динамический стиль перезагружается в Angular 6 при нажатии кнопки, не имеющей к ней никакого отношения

Question

У меня есть несколько динамических таблиц стилей, которые я загружаю, основываясь на каком-то состоянии моего приложения Angular (подумайте над темой для разных пользователей).

Я только недавно портировал этот код на Angular 6 (из AngularJS), и мне потребовалосьнесколько дней, чтобы понять, что мои страницы мерцают, когда я нажимаю на флажок или даже раскрываю / сворачиваю регион с помощью кнопки.

Я немного покопался и обнаружил, что мой стиль, похоже, перезагружаетсяпричина.

Вы можете увидеть простой StackBlitz

Суть кода:

// app.component.ts

//...
style: 'a' | 'b';

constructor(private sanitizer: DomSanitizer){}

getStyleUrl() {
  return this.sanitizer.bypassSecurityTrustResourceUrl(`assets/${this.style || 'a'}.css`);
}

doSomething() {
  console.log(`done!`);
}

HTML:

// app.component.html
<link rel="stylesheet" [href]="getStyleUrl()">
...
<a type="button" (click)="style = 'a'">A</a><br>
<a type="button" (click)="style = 'b'">B</a><br>
<a type="button" (click)="doSomething()">B</a><br>

Ниже вы можете видеть, что каждый раз, когда я нажимаю кнопку no-op, которая не меняет URL-адрес стиля, он по-прежнему перезагружает стиль.

bypassSecurityTrustResourceUrl() возвращает разные URL при каждом вызове?так обнаружение изменений заставляет его перезагружаться?Как еще я могу загрузить этот стиль динамически?

Answer 1

Только не вызывайте функцию из шаблона;он запускается на каждом цикле CD, что обычно происходит чаще, чем вы ожидаете.И да - дезинфицирующее средство возвращает новый объект каждый раз, когда он вызывается, поскольку это чистая функция.

constructor(private sanitizer: DomSanitizer) {
  this.styleUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`assets/${this.style || 'a'}.css`);
}

<link rel="stylesheet" [src]="styleUrl">