Angular 19.1.0 对 ngComponentOutlet 新增 componentInstance getter。 透过 componentInstance，开发人员可以直接在模板和元件 class 中与渲染的元件进行互动。

定义 Greeting 服务

import { Injectable, signal } from \'@angular/core\';

@Injectable({
providedIn: \'root\'
})
export class AdminGreetingService {
greeting = signal(\'\');

setGreeting(msg: string) {
this.greeting.set(msg);
}
}

AdminGreetingService 是一个具有 setGreeting 方法的服务，该服务将被注入到渲染的元件中。

建立使用者表单

import { ChangeDetectionStrategy, Component, model } from \'@angular/core\';
import { FormsModule } from \'@angular/forms\';

@Component({
selector: \'app-user-form\',
imports: [FormsModule],
template: `
@let choices = [\'Admin\', \'User\', \'Intruder\'];
@for (c of choices; track c) {
@let value = c.toLowerCase();
<div>
<input type="radio" [id]="value" [name]="value" [value]="value"
[(ngModel)]="userType" />
<label for="admin">{{ c }}</label>
</div>
}
Name: <input [(ngModel)]="userName" />
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserFormComponent {
userType = model.required<string>();
userName = model.required<string>();
}

UserFormComponent 有一个输入元素，您可以在其中输入名称和单选按钮以选择使用者类型。当使用者选 "Admin"时，示范会渲染 AdminComponent 元件。当使用者选择 "User" 时，它会渲染 UserComponent 元件。

动态渲染元件

// app.component.html

<h2>{{ type() }} Component</h2>
<p>Name: {{ name() }}</p>
<h2>Permissions</h2>
<ul>
@for (p of permissions(); track p) {
<li>{{ p }}</li>
} @empty {
<li>No Permission</li>
}
</ul>

@Component({
selector: \'app-admin\',
templateUrl: `app.component.html`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AdminComponent implements Permission {
permissions = input.required<string[]>();
name = input(\'N/A\');
type = input.required<string>();
service = inject(GREETING_TOKEN);

getGreeting(): string {
return `I am an ${this.type()} and my name is ${this.name()}.`;
}

constructor() {
effect(() => this.service.setGreeting(`Hello ${this.name()}, you have all the power.`));
}
}

@Component({
selector: \'app-user\',
templateUrl: `app.component.html`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class UserComponent implements Permission {
type = input.required<string>();
permissions = input.required<string[]>();
name = input(\'N/A\');
service = inject(GREETING_TOKEN);

getGreeting(): string {
return `I am a ${this.type()} and my name is ${this.name()}.`;
}

constructor() {
effect(() => this.service.setGreeting(`Hello ${this.name()}.`));
}
}

此示范有两个元件，AdminComponent 和 UserComponent，用于动态渲染。每个元件都有 type、 permissions 和 name 的讯号输入。它有一个 getGreeting 方法来传回问候语。当 name 输入更新时，effect 会执行回呼以在 AdminGreetingService 中设定问候语。

定义动态元件配置

export const GREETING_TOKEN = new InjectionToken<{ setGreeting: (name: string) => void }>(\'GREETING_TOKEN\');

const injector = Injector.create({
providers: [{
provide: GREETING_TOKEN,
useClass: AdminGreetingService
}]}
);

GREETING_TOKEN 是一个 injection token，它提供实作 setGreeting 函数的物件。 Injector.create 静态方法建立一个 injector，当程式码注入 GREETING_TOKEN 时，该 injector 会传回 AdminGreetingService。

export const configs = {
"admin": {
type: AdminComponent,
permissions: [\'create\', \'edit\', \'view\', \'delete\'],
injector
},
"user": {
type: UserComponent,
permissions: [\'view\'],
injector
},
}

configs 物件将键对应到动态元件 (type)、permissions 和 injector。

使用 ngComponentOutlet 以程式渲染元件

@Component({
selector: \'app-root\',
imports: [NgComponentOutlet, UserFormComponent],
template: `
<app-user-form [(userType)]="userType" [(userName)]="userName" />
@let ct = componentType();
<ng-container [ngComponentOutlet]="ct.type"
[ngComponentOutletInputs]="inputs()"
[ngComponentOutletInjector]="ct.injector"
#instance="ngComponentOutlet"
/>
@let componentInstance = instance?.componentInstance;
<p>Greeting from componentInstance: {{ componentInstance?.getGreeting() }}</p>
<p>Greeting from componentInstance\'s injector: {{ componentInstance?.service.greeting() }}</p>
<button (click)="concatPermissionsString()">Permission String</button>
hello: {{ permissionsString().numPermissions }}, {{ permissionsString().str }}
`,
})
export class App {
userName = signal(\'N/A\');
userType = signal<"user" | "admin" | "intruder">(\'user\');

componentType = computed(() => configs[this.userType()]);
inputs = computed(() => ({
permissions: this.componentType().permissions,
name: this.userName(),
type: `${this.userType().charAt(0).toLocaleUpperCase()}${this.userType().slice(1)}`
}));

outlet = viewChild.required(NgComponentOutlet);
permissionsString = signal({
numPermissions: 0,
str: \'\',
});

concatPermissionsString() {
const permissions = this.outlet().componentInstance?.permissions() as string[];
this.permissionsString.set({
numPermissions: permissions.length,
str: permissions.join(\',\')
});
}
}

componentType = computed(() => configs[this.userType()]);

componentType 是一个计算讯号，当使用者选择使用者类型时，它会寻找type、injector 和 permissions。

<ng-container [ngComponentOutlet]="ct.type"
[ngComponentOutletInputs]="inputs()"
[ngComponentOutletInjector]="ct.injector"
#instance="ngComponentOutlet"
/>

App 元件建立一个 NgContainer 并将 type、inputs 和 injector 分配给 ngComponentOutlet、ngComponentOutletInputs 和 ngComponentOutletInjector 输入。

此外，ngComponentOutlet directive 将 componentInstance 公开给 instance 模板变数。

在模板中使用 componentInstance

@let componentInstance = instance?.componentInstance;
<p>Greeting from componentInstance: {{ componentInstance?.getGreeting() }}</p>
<p>Greeting from componentInstance\'s injector: {{ componentInstance?.service.greeting() }}</p>

在模板中，我可以依靠 componentInstance 显示 getGreeting 方法的值。 此外，我存取 AdminGreetingService 服务并显示 greeting 讯号的值。

在 component class 中使用 componentInstance

outlet = viewChild.required(NgComponentOutlet);
permissionsString = signal({
numPermissions: 0,
str: \'\',
});

concatPermissions() {
const permissions = this.outlet().componentInstance?.permissions() as string[];
this.permissionsString.set({
numPermissions: permissions.length,
str: permissions.join(\',\')
});
}

viewChild.required 函数查询 NgComponentOutlet， this.outlet().componentInstance 公开渲染的元件。 concatPermissions 方法连接渲染元件的 permissions 输入，并将结果指派给 permissionsString 讯号。

<button (click)="concatPermissions()">Permission String</button>
hello: {{ permissionsString().numPermissions }}, {{ permissionsString().str }}

点选按钮会呼叫 concatPermissions 方法来更新 permissionString 讯号，并且模板会显示讯号值。

总之，componentInstance 公开了渲染的元件，供 Angular 开发人员呼叫其讯号、输入、方法和内部服务。

参考：

  • ngComponentOutlet API: https://angular.dev/api/common/NgComponentOutlet
  • ngComponentOutlet Doc: https://angular.dev/guide/components/programmatic-rendering#using-ngcomponentoutlet
  • Stackblitz Demo: https://stackblitz.com/edit/stackblitz-starters-2vwgzqus?file=src%2Fmain.ts