Как отделить обнаружение изменений от одного свойства вместо всего компонента в Angular 6?

Question

У меня есть глобальный DataService, который доступен в нескольких компонентах:

import { Injectable } from '@angular/core';

@Injectable({providedIn: 'root'})

export class DataService {
  public data: JSON;

  constructor() {
    this.data = localStorage.getItem('data');
  }

  public getData(): JSON {
    return this.data;
  }
}

Он предоставляется через app.component.ts:

import { DataService } from './data.service';

@Component({
  providers: [
    DataService
  ]
})

export class AppComponent {
  constructor() { }

}

… и используется следующим образом в компонентах:

import { DataService } from './data.service';

export class SomeComponent implements OnInit {
  public data: JSON;

  constructor(public data: DataService) {}

  ngOnInit() {
    this.data = this.data.getData();
  }
}

В шаблоне data отображается как:

<ul>
  <ng-container *ngFor="let value of data">
    <li>{{ value.title }}</li>
  </ng-container>
</ul>

Это прекрасно работает.

---

Однако проблема в том, что этот списокможет содержать до 2000 записей.На этой странице также ввод текста с прикрепленными событиями на keyup.В Chrome и Firefox это нормально, но в Safari 11 ввод сильно замедляется.Это происходит только тогда, когда список очень длинный - короткие списки работают как шарм.

---

Моя идея теперь состоит в том, чтобы отключить обнаружение изменений для this.data в компоненте, так как этот список никогда не изменится один разон загружен.

Я пытался использовать ChangeDetectorRef с ref.detach(), что (как и ожидалось) отменит все изменения.

Как я могу решить эту проблему?