Я создал приложение, которое использует представления внутри представлений, и у меня возникают проблемы с перемещением моего кода в библиотеки, а затем с предоставлением общего доступа к нему. загрузить компонент для просмотра. Все мои страницы имеют общий компонент навигации, который предоставляет строку заголовка, боковое меню, автоматическое скрытие, изменение размера и т. Д. c. С помощью наблюдаемых объектов.
Таким образом, моя маршрутизация имеет основной путь к NavigationComponent, это простая Angular схема навигации по материалам c. Затем у него есть выход маршрутизатора, который затем будет отображать мой целевой компонент.
Мои основные страницы - это схемы панели управления материалами. На них показаны карточки с информацией и маршрутизация по стандартным URL-адресам для загрузки фактического компонента.
Например, на моей домашней странице есть навигация, а затем ряд карточек для отображения различных данных (о сайте, событиях, новостях и т. Д. c.)
const routes:Routes = [
{ path: '', component: NavigationCommonComponent,
children: [
{ path: '', component: HomeComponent },
{ path: 'aboutus', component: AboutComponent },
{ path: 'events', component: EventsComponent },
{ path: 'news', component: NewsComponent },
]
}
];
Приведенная выше базовая маршрутизация c может дать некоторую информацию. Когда это просто карточки, все работает нормально. Я переместил карточки в библиотеку, и данные могут отображаться на карточке. Сейчас я пытаюсь показать содержимое компонентов в данных карты.
Например, если карта была жестко запрограммирована, вы бы использовали
<mat-card>
<appEvents></AppEvents>
</mat-card>
Затем это будет использовать EventsController для отображения всего, что находится на карточке. Жестко запрограммировано, это работает. Сейчас я пытаюсь использовать те же примеры viewComponentRef из документов Angular 9, чтобы эти карты загружались динамически.
Например, теперь у меня есть массив данных с компонентом ( Тип) как элемент для просмотра. У меня есть компонент карты
. Я использовал AdService из примеров:
@Injectable()
export class AdService {
public getAds() {
return [
new AdItem(HeroJobAdComponent, {name: 'Bombasto', bio: 'Brave as they come'}),
new AdItem(HeroJobAdComponent, {name: 'Dr IQ', bio: 'Smart as they come'}),
];
}
}
HeroJobAdComponent
@Component({
template: `
<div class="job-ad">
<h4>{{data.headline}}</h4>
{{data.body}}
</div>
`
})
export class HeroJobAdComponent implements AdComponent {
@Input() public data:any;
}
и предоставленная директива.
@Directive({
selector: '[appAdHost]',
})
export class AdDirective {
constructor(public viewContainerRef:ViewContainerRef) { }
}
Кажется, все правильно, за исключением того, что когда код запущен, viewContainerRef из ViewChild:
@ViewChild(AdDirective, {static: true, read: ViewContainerRef}) public adHost:AdDirective;
кажется пустым в строке const viewContainerRef = this.adHost.viewContainerRef;. AdHost не определен.
public loadComponent() {
this.currentAdIndex = (this.currentAdIndex + 1) % this.ads.length;
const adItem = this.ads[this.currentAdIndex];
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(adItem.component);
const viewContainerRef = this.adHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
(componentRef.instance as AdComponent).data = adItem.data;
}
Я считаю, что это связано с уровнями компонентов, где у меня есть список сеток / карточек (схема панели материалов c) в качестве дочернего элемента моего навигационного компонента . Я не знаю, как сделать так, чтобы этот элемент не был неопределенным.