无法将动态组件附加到动态锚点

Question

我是使用 Angular 6.0.0-beta 的新 Angular。 我无法将动态组件附加到动态锚点，如下所述：-

我已经在 html 中放置了这样的锚（appContent）：-

    <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) 映射的代码：-

  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) 中的数据，但在更改选项卡时，即使 anchor(appContent) 可用，它也不会反映当前选项卡的数据。

请帮我解决这个问题。 提前谢谢你。

Answer 1

我认为你把这件事复杂化了一点。我的意思是，你为什么使用动态组件？您总是在添加/删除相同的组件 (ContentComponent)。仅注入该组件并将其contentList 属性绑定到您要显示的内容会容易得多（我不知道ContentComponent os I'的选择器，假设它是scontent`）：

<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 时隐藏该组件（不知道这是否可能）