Как передать новые данные динамически создаваемым вложенным ComponentRef в Angular - PullRequest
0 голосов
/ 07 апреля 2020

В моем проекте мне нужно динамически создавать компоненты и передавать им данные. Через некоторое время данные изменятся, и мне нужно будет обновить данные, которые передаются каждому компоненту. Насколько я понимаю, вы можете передавать данные в компонент, используя @Input(), получая доступ к ComponentRef.instance и устанавливая данные, равные имени Input(). Например, если у вас есть следующий набор данных:

dbResponse: Response = {
    data: {
      title: "parent title",
      child: {
        title: "child title"
      }
    }
  }

Вы можете создать элемент с помощью ViewContainerRef и установить его данные следующим образом:

const parentFactory = this.cfr.resolveComponentFactory(ParentComponent);
this.parentRef = this.dynamicHost.viewContainerRef.createComponent(parentFactory)
this.parentRef.instance.data = this.dbResponse.data;

Чтобы обновить эти данные в позже я смогу получить доступ к ComponentRef из this.parentRef.instance.data и обновить данные.

Мой вопрос в моем реальном проекте: dbResponse - это огромный массив вложенных объектов, из которых Я создаю несколько вложенных компонентов из этих данных. Есть ли способ передать dbResponse родителю и чтобы обновления распространились по всем дочерним компонентам без необходимости хранить каждый ComponentRef родителей и дочерних элементов для обновления данных каждого компонента?

ПРИМЕР ЗДЕСЬ: https://ng-run.com/edit/17H84mTssBc0N5AGCfbG

В этом примере я отображаю родительский и дочерний компоненты. Ребенок отображается через ng-content. Верхний пример создается в HTML app.component.html, и через 3 секунды новые данные автоматически обновляются через привязку свойства в [data]. Нижний пример создается с использованием ComponentFactoryResolver в app.component.ts, но, как вы можете видеть, дочерний элемент не обновляется при прохождении новых данных. Очевидно, что в этом небольшом примере я мог бы просто сохранить childRef в переменной компонента и затем получить доступ к свойству data, но в массивно вложенных компонентах поиск пути к правильному ComponentRef кажется неправильным способом доступ к данным и их обновление.

Мне было интересно, как лучше всего передать данные через компоненты Dynami c, что я могу сделать лучше? Может быть destroy() ссылка и перестроить?

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...