Невозможно добавить динамический компонент к динамическому якору

Question

Я новичок в Angular, использую Angular 6.0.0-beta. Я не могу добавить динамический компонент к динамической привязке, как описано ниже: -

Я поместил привязку (appContent) в HTML: -

    <mat-card>
    <mat-card-content>
        <mat-tab-group class="tab-group" (selectedTabChange)="onTabChanged($event)">
            <mat-tab *ngFor="let obj of tags">
                <ng-template mat-tab-label>{{ obj.name }}</ng-template>
                <div class="tab-content" appContent>
                    {{ obj.name }}
                </div>
            </mat-tab>
        </mat-tab-group>
    </mat-card-content>
    </mat-card>

Я использую приведенный ниже код для добавления к ContentComponent в appContent, я не добавляю фрагмент кода, который создает TagId и Array (Content) Mapping: -

  private tags: Array<Tag>;
  private currentTag: Tag;
  // private contents: Array<Content>;
  private tagContentsMap: Map<number, Array<Content>>;

  onTabChanged(event: MatTabChangeEvent) {
    this.currentTag = this.tags[event.index]; // fetching current tag from the Tags Array
    this.loadContentForTag(this.currentTag);
  }

  private loadContentForTag(tag: Tag) {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ContentComponent);
    const viewContainerRef = this.contentsDirective.viewContainerRef;
    viewContainerRef.clear();
    const componentRef = viewContainerRef.createComponent(componentFactory);

    console.log(tag);
    console.log(this.tagContentsMap.get(tag.tagId)); // I can see content array here on tab change
    (<ContentComponent>componentRef.instance).contentList = this.tagContentsMap.get(tag.tagId); // On assigning content array here is not reflecting in the HTML of ContentComponent
  }

ContentComponent, как показано ниже: -

import { Component, OnInit } from '@angular/core';
import { Content } from '../../models/flat/content';

@Component({
  selector: 'app-content',
  template: `
  <p *ngFor="let content of contentList">
    {{ content.title }}
  </p>
`,
  styleUrls: ['./content.component.scss']
})
export class ContentComponent implements OnInit {
  contentList: Array<Content>;

  constructor() { }

  ngOnInit() {
  }

}

Теперь проблема в том, что вкладки создаются динамически, а appContent зависит от текущей вкладки. Для первой автоматически выбранной вкладки ContentComponent отражает данные в (div class = "tab-content" appContent), но при смене вкладок не отражает данные текущей вкладки, даже если якорь (appContent) доступен.

Пожалуйста, помогите мне решить эту проблему. Заранее спасибо.

Answer 1

Я думаю, вы слишком усложняете это. Я имею в виду, почему вы используете динамические компоненты? Вы всегда добавляете / удаляете один и тот же компонент (ContentComponent). Было бы намного проще просто внедрить этот компонент и связать его свойство contentList с контентом, который вы хотите показать (я не знаю селектор для ContentComponent os I ', предполагая, что он s content`):

<mat-card>
    <mat-card-content>
        <mat-tab-group class="tab-group" (selectedTabChange)="onTabChanged($event)">
            <mat-tab *ngFor="let obj of tags">
                <ng-template mat-tab-label>{{ obj.name }}</ng-template>
                <div class="tab-content" appContent>
                    <content [contentList]="tagContent"></content>
                    {{ obj.name }}
                </div>
            </mat-tab>
        </mat-tab-group>
    </mat-card-content>
</mat-card>

Теперь в компоненте:

private tags: Array<Tag>;
private currentTag: Tag;
private contentTag: Array<Content>;
// private contents: Array<Content>;
private tagContentsMap: Map<number, Array<Content>>;

onTabChanged(event: MatTabChangeEvent) {
    this.currentTag = this.tags[event.index]; // fetching current tag from the Tags Array
    this.tagContent = this.tagContentMap.get(this.currentTag.tagId);
}

Как видите, намного проще. Вы также можете добавить ngIf к тегу <content ...></content>, чтобы скрыть этот компонент, если tagContent пуст или null (не знаю, возможно ли это)