Как в Angular 5 получить доступ к динамически добавляемым дочерним компонентам из родительского компонента?
Разрабатываю проект Ionic + Angular 5.
Мне нужно динамически загружать некоторые компоненты. Следуя Пример загрузчика динамических компонентов в документации Angular, я могу успешно загружать компоненты и отображать их.
Однако мне нужно иметь возможность перебирать загруженные компоненты.
Я могу легко поддерживать свой собственный список компонентов в родительском элементе, когда я создаю и уничтожаю дочерние компоненты, но мне кажется, что это некрасиво, а не «Angular Way».
После долгих экспериментов и исследований кажется, что я не могу использовать @ViewChildren для доступа к динамически добавляемым компонентам, поскольку у них есть свои собственные представления. ViewChildren не находит динамически компоненты
Это правильно?
Я могу использовать viewContainerRef.get () для перебора дочерних представлений и получения ViewRefs. Но, похоже, нет способа получить ссылку на компонент с помощью ViewRef?
Я заметил свойство rootNodes у ViewRef, однако это свойство не задокументировано в документации Angular Посмотреть Ref Однако оно задокументировано в документации EmbeddedViewRef Встроенный просмотр Ref, но, похоже, это все еще не дает мне доступа к компоненту.
Итак, вопрос в том, когда у меня есть родительский элемент, который динамически добавляет дочерние компоненты, как я могу перейти из родительского цикла через дочерние компоненты (чтобы я мог вызвать один из моих методов в дочернем элементе)? Я подозреваю, что мне не хватает чего-то глупого простого, у меня есть какое-то фундаментальное заблуждение или что я должен использовать другой шаблон.
Я изменил пример динамического загрузчика компонентов, чтобы выделить то, что я пытаюсь сделать.
Да, это мой запасной вариант, который я использую сейчас. Моя цель - попытаться понять угловое мышление. Мне кажется, это должно быть возможно и без отдельного стека компонентов, но, возможно, я ошибаюсь.
Это угловой способ, которым эти динамические компоненты должны взаимодействовать с помощью общей службы, размещенной на родительском сервере и внедренной в дочернюю. Я лично считаю, что управление исх. Экземпляром - это прекрасно. (ваше решение для резервного копирования)
@pwwpche Ваша рекомендация отличная. Очень простой и позволяет легко следить за кодом и поддерживать его в будущем.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Итак, я подумал об этом, и чистый способ сделать это (на мой взгляд) - передать create свойство родительскому компоненту, например parentContext, и передать данные или метод этому объекту.
Пример - в родительском компоненте вы даже можете передать метод своему дочернему компоненту, и он будет работать в контексте родительского компонента.:
gotoDetail(hero: Hero): void {
this.entry.clear();
const factory = this.resolver.resolveComponentFactory(DynamicModalChildComponent);
this.dynamicModalComponentRef = this.entry.createComponent(factory);
this.dynamicModalComponentRef.instance.hero = hero;
// Pass parent context to child in order to close modal hierarchically (parent/child component relationship).
// This approach is less verbose and makes it easier to unit test than a service in my opinion.
this.dynamicModalComponentRef.instance.parentContext = () => this.destroyComponent();
}
Мне просто интересно, почему бы не сохранить созданный компонент в члене и не использовать его позже, например,
let componentRef = viewContainerRef.createComponent(componentFactory); this.newComponent = componentRef;, а затем вlogViewChildren()сделатьconsole.info(this.newComponent.instance.data);?