Javascript 使用NgDeliverentOutlet和动态内容投影的Angular 渲染组件

您需要使用ViewContainerRef中的createEmbeddedView，其中我们输入模板作为第一个参数，然后是包含模板上下文的第二个参数.我创建了一个新属性templateRef，其中包含创建的模板ref struct .然后最后我们将该输入传递给属性content(满分*ngComponentOutlet)

NgComponentOutlet中提到的例子是理解步骤和过程的一个很好的例子.

完整代码:完整代码:

父 TS :

import { CommonModule } from '@angular/common';
import {
  Component,
  ViewChild,
  ViewContainerRef,
  TemplateRef,
  Injector,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { AComponent } from 'src/app/a/a.component';
import { BComponent } from 'src/app/b/b.component';

/**
 * @title Basic button-toggles
 */
@Component({
  selector: 'button-toggle-overview-example',
  templateUrl: 'button-toggle-overview-example.html',
  standalone: true,
  imports: [
    MatButtonToggleModule,
    CommonModule,
    AComponent,
    BComponent,
    FormsModule,
  ],
})
export class ButtonToggleOverviewExample {
  @ViewChild('actionItesm', { static: true }) actionItesm!: TemplateRef<any>;
  selectedClockType: any;
  items: Array<any> = [
    { id: 1, label: 'a', component: AComponent },
    { id: 2, label: 'b', component: BComponent },
  ];
  myContent?: any[][];
  myInjector: Injector;

  constructor(injector: Injector, private vcr: ViewContainerRef) {
    this.myInjector = injector;
  }

  ngOnInit() {
    // Create the projectable content from the templates
    if (this.items?.length) {
      this.items.forEach((item: any) => {
        item.templateRef = [
          this.vcr.createEmbeddedView(this.actionItesm, { item: item })
            .rootNodes,
        ];
      });
    }
  }
}

父 HTML :

<mat-button-toggle-group appearance="legacy" [(ngModel)]="selectedClockType">
  <mat-button-toggle *ngFor="let item of items" [value]="item" color="primary">
    {{ item.label }}
  </mat-button-toggle>
</mat-button-toggle-group>
<br />
<br />
<br />
@for (item of items; track item.id;) { {{item.label}}
<ng-container
  *ngComponentOutlet="item.component;
  content: item.templateRef;"
></ng-container>
}
<ng-template #actionItesm let-item="item">{{item.label}} asdf</ng-template>

children TS :

import { Component } from '@angular/core';

@Component({
  selector: 'app-b',
  standalone: true,
  imports: [],
  templateUrl: './b.component.html',
  styleUrl: './b.component.scss'
})
export class BComponent {

}

子 HTML :

<br />
<hr />
B COMPONENT
<ng-content></ng-content>
<hr />
<br />

Stackblitz Demo