В моем проекте мне нужно динамически создавать компоненты и передавать им данные. Через некоторое время данные изменятся, и мне нужно будет обновить данные, которые передаются каждому компоненту. Насколько я понимаю, вы можете передавать данные в компонент, используя @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()
ссылка и перестроить?
Спасибо!