Angular 19.2.0 引入了 untagged template literals in expressions 新功能,其中可以在模板的 Angular expression 中使用反引號 (backticks) 插入變數。 目的是促進元件模板內的字串串聯。 支持這些案例:
此功能在 19.2.0-next 版本中出現。這不是一個穩定的版本;請使用 Stackblitz 進行測試。
ng update @angular/cli --next
ng update @angular/core --next
@Component({
selector: 'app-root',
templateUrl: `./main.component.html`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class App {
description = `${VERSION.full} - Untagged Template Literals`;
}
// main.component.html
<h1>Version {{ description }}</h1>
在 untagged template literals 功能之前,"Version" 靜態文字位於 Angular Expression 之前。
// main.component.html
<h1>{{ `Version ${description}` }}</h1>
在使用 untagged template literals 功能之後,"Version" 和 description
將連接成一個字串。 h1 元素渲染 "Version 19.2.0-next.0 - Untagged Template Literals"。
@Component({
selector: 'app-root',
templateUrl: `./main.component.html`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class App {
description = `${VERSION.full} - Untagged Template Literals`;
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(),
}));
}
@let ct = componentType();
<ng-container [ngComponentOutlet]="ct.type"
[ngComponentOutletInputs]="inputs()"
#instance="ngComponentOutlet"
/>
@let permissions = componentInstance?.permissions() ?? [];
@let strPermission = permissions.join(', ');
@let numPermissions = permissions.length;
@let permissionUnit = numPermissions > 1 ? 'permissions' : 'permission';
@let delimiter = numPermissions >= 1 ? ', ' : '';
Multiple Interpolations: {{ numPermissions }} {{ permissionUnit }}{{ delimiter}}{{strPermission} }}
componentInstance
變數是動態渲染的元件。 permission
變數儲存渲染元件的權限數組。 strPermission
變數將權限數組連接成一個字串。 當使用者擁有多個權限時,permissionUnit
的值為"permissions"。 當使用者有0或1個權限時,值為 "permission"。 當使用者擁有多個權限時,在權限字串前插入逗號。
在 untagged template literals 功能之前,靜態文字 "Multiple Interpolations" 位於 Angular Expression 之前。 所有 expressions, numPermissions
, permissionUnit
, delimiter
和 strPermission
均單獨插值。
// main.component.html
@let permissions = componentInstance?.permissions() ?? [];
@let strPermission = permissions.join(', ');
@let numPermissions = permissions.length;
@let permissionUnit = numPermissions > 1 ? 'permissions' : 'permission';
@let delimiter = numPermissions >= 1 ? ', ' : '';
{{ `Multiple Interpolations: ${numPermissions} ${permissionUnit}${delimiter}${strPermission}` }}
在 untagged template literal 之後,這些變數被連接並插入到 Angular Expression 的大括號之間。
@Component({
selector: 'app-admin',
templateUrl: `app-user.component.html`,
imports: [TitleCasePipe],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AdminComponent implements Permission {
permissions = input.required<string[]>();
name = input('N/A');
type = input.required<string>();
}
AdminComponent
元件導入 TitleCasePipe
管道以將 permission
和 type
輸入大寫。
<!-- Template string with pipe -->
<h2>{{ type() | titlecase }} Component</h2>
在 untagged template literals 之前,expression 會將 type
的訊號值傳遞到 titleCase
管道 (pipe)。然後,"Component" 跟在 expression 後面,前面有一個空格。
<!-- Template string with pipe -->
<h2>{{ `${type() | titlecase} Component` }}</h2>
在 untagged template literals 之後, type
訊號值傳遞到 titleCase
管道 (pipe),並與 "Component" 連接以在 Angular Expression 內形成一個新字串。
type
為 Admin
時,範本字串將被評估為 "Admin Component"。type
為 User
時,範本字串被評估為 "User Component"。type
為 Intruder
時,範本字串將被評估為「Intruder Component"。untagged template literals 功能是將多個字串連接成一個字串並在 Angular Expression 中對其插值的便捷方法。