Говоря угловой компонент для перезагрузки

Question

У меня есть компонент, который принимает в качестве @ Input () объект документа, и он отображает все ответы на этот документ. Вызывается так:

<app-replies *ngIf="replies" [doc]="doc"></app-replies>

Пока все хорошо. Теперь, когда вызывающий компонент получает событие, которое сообщает ему, что список ответов был изменен, я хочу сказать компоненту app-replies , чтобы он заново отобразил список ответов.

Каков наилучший способ сделать это? Я могу подумать о нескольких возможностях, но я не нашел примеров такой ситуации в сети. Это:

1. Передайте объект EventEmitter в компонент app-replies , затем вставьте в него события, чтобы вызвать перезагрузку.

2. Измените значение doc , переданное в клонированную копию, чтобы инициировать обнаружение изменений платформы. (Не знаю, сработает ли это на самом деле).

3. Создайте инъецируемую службу, которая предоставляет RxJS Субъект объектов, на которые компонент подписывается , и у которого вызывающий обслуживает службу.

4. Используйте ViewChild () для ссылки на компонент в invoker и вызывайте метод reload () в app-replies напрямую. Проблема заключается в том, что дочерний компонент является предметом предложения * ngIf , поэтому свойство ViewChild не определяется в предсказуемое время в жизненном цикле компонента. Если бы был какой-то способ решить эту проблему, я бы предпочел этот метод.

Или, может быть, есть какой-то другой стандартный механизм, который я только что пропустил. Есть предложения?

Answer 1

Я не уверен, что выбрал правильный путь в этом, но я нашел относительно простое решение, которое, кажется, работает. Проблема с моим «вариантом 2» заключается в том, что установка переменной недостаточна, поскольку обнаружение углового изменения просто скопирует значение в целевой компонент, но никакие методы для загрузки нового набора ответов не будут вызываться.

Итак, я сделал следующее. HTML-код такой же, как и раньше:

  <app-replies *ngIf="replies" [doc]="replies"></app-replies>

Затем в компоненте используйте ключевое слово set , чтобы перехватить изменения и ответить следующим образом:

  @Input() set doc(doc: JsonPo) {
    this._doc = doc;
    this.fetchReplies();
  }
  _doc: JsonPo;

Теперь, когда я устанавливаю переменную в вызывающем компоненте, вызывается метод fetchReplies () без необходимости ссылаться на компонент с помощью декоратора ViewChild . (У которого проблемы в этом случае).

Кроме того, больше нет необходимости вызывать fetchReplies () в ngOnInit () , потому что он будет вызываться, когда каркас создает экземпляр компонента, когда-то между тем, когда конструктор заканчивается и вызывается ngOnInit () .

Я надеюсь, что это поможет кому-то еще в этой ситуации. Я не видел подобных примеров кода при поиске.

Answer 2

Предпочли бы вариант 2 или вариант 3.

вариант 2:

Если тип данных переменной doc - Array / Object.Мы можем создать неизменный объект, используя Object.create () /Array.slice().

, параметр 3:

Если тип данных переменной doc равен Number / String.Мы можем создать Subject / Behavior / Subject и выдать значение, используя .next ().Полученное значение можно получить с помощью подписки в компоненте app-replies.