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和数组（内容）映射的代码片段： -

  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 =＆＃34; tab-content＆＃34; appContent），但在更改选项卡时，它不反映当前选项卡的数据，即使锚点也是如此（appContent）可用。

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

Answer 1

我认为你有点太复杂了。我的意思是，你为什么要使用动态组件？您总是添加/删除相同的组件（ContentComponent）。注入该组件会更容易，并将其contentList属性绑定到您想要显示的内容（我不知道ContentComponent os I'的选择器，假设它{{1 }} 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时隐藏该组件（不知道是否可行）

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

1 个答案: