Angular 11：如何聲明包含 Angular 組件的數組

Question

我想在 Angular 組件中創建一個列表，該列表顯示來自其他組件的內容。 我正在嘗試聲明一個包含 Angular 組件的數組，如下所示：

import { Component, Input, OnInit } from '@angular/core';
import { FirstComponent } from './components/first/first.component';
import { SecondComponent } from './components/second/second.component';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styleUrls: ['./account.component.scss']
})
export class AccountComponent implements OnInit {
  tabs = [
    {
      name: 'First',
      content: FirstComponent
    },
    {
      name: 'Second',
      content: SecondComponent
    }
  ];

  ngOnInit(): void {
  }

}

為了在 HTML 文件中使用它，如下所示：

<ul>
  <li *ngFor="let tab of tabs">
    {{ tab.name }}
    {{ tab.content }}
  </li>
</ul>

我知道上面的代碼不起作用，但我想知道是否可以做這樣的事情，如果不是，獲得相同效果的正確解決方案是什么。

Answer 1

您將不得不使用 Angular 路由器。 首先，您必須通過為每個組件指定路徑來配置 Angular 路由器。 然后使用數組中的這些路徑在每個組件之間切換。 不要忘記 output 組件的路由器插座標簽。

pathList = ["/first-component", "/second-component"];

<ul *ngFor="let path of pathList">
    <li><a routerLink="path">{{path}}</a></li>
</ul>

Answer 2

使用portal可以實現參考鏈接。
請參考以下代碼

@Component({
  selector: 'tempComponent1',
  template: '<p>component1</p>'
})
export class tempComponent1 {}
@Component({
  selector: 'tempComponent2',
  template: '<p>component2</p>'
})
export class tempComponent2 {}

import {
  ComponentPortal,
  DomPortal,
  Portal,
  TemplatePortal
} from '@angular/cdk/portal';
import {
  AfterViewInit,
  Component,
  TemplateRef,
  ViewChild,
  ViewContainerRef,
  ElementRef
} from '@angular/core';

/**
 * @title Portal overview
 */
@Component({
  selector: 'cdk-portal-overview-example',
  templateUrl: 'cdk-portal-overview-example.html',
  styleUrls: ['cdk-portal-overview-example.css']
})
export class CdkPortalOverviewExample implements AfterViewInit {
  @ViewChild('templatePortalContent') templatePortalContent: TemplateRef<
    unknown
  >;
  @ViewChild('domPortalContent') domPortalContent: ElementRef<HTMLElement>;

  selectedPortal: Portal<any>;
  componentPortal: ComponentPortal<tempComponent1>;
  componentPortal2: ComponentPortal<tempComponent2>;
  templatePortal: TemplatePortal<any>;
  domPortal: DomPortal<any>;

  constructor(private _viewContainerRef: ViewContainerRef) {}

  ngAfterViewInit() {
    this.componentPortal = new ComponentPortal(tempComponent1);
    this.componentPortal2 = new ComponentPortal(tempComponent2);
  }
}

@Component({
  selector: 'component-portal-example',
  template: 'Hello, this is a component portal'
})
export class ComponentPortalExample {}  

---

<h2>The portal outlet is below:</h2>
<div class="example-portal-outlet">
  <ng-template [cdkPortalOutlet]="selectedPortal"></ng-template>
</div>
<ng-template #templatePortalContent
  >Hello, this is a template portal</ng-template
>

<button (click)="selectedPortal = componentPortal">
  Render component portal
</button>
<button (click)="selectedPortal = componentPortal2">
  Render template portal
</button>

Stackblitz 代碼