.

iT邦幫忙

0

Angular 19.2.0 新功能 - Untagged template literals in expressions

  • 分享至 

  • xImage
  •  

Angular 19.2.0 引入了 untagged template literals in expressions 新功能,其中可以在模板的 Angular expression 中使用反引號 (backticks) 插入變數。 目的是促進元件模板內的字串串聯。 支持這些案例:

  • 單次插值 (Single interpolation)
  • 多次插值 (Multiple interpolations)
  • 用 Angular pipe 插值 (Interpolation with pipe)

此功能在 19.2.0-next 版本中出現。這不是一個穩定的版本;請使用 Stackblitz 進行測試。

ng update @angular/cli --next
ng update @angular/core --next

單次插值 (Single Interpolation)

@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"。

多次插值 (Multiple interpolations)

@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, delimiterstrPermission 均單獨插值。

// 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 的大括號之間。

  • 當使用者類型為 "Admin" 時,範本字串被評估為 "Multiple Interpolations: 4 permissions, create, edit, view, delete"。
  • 當使用者類型為 "User" 時,範本字串的計算結果為 "Multiple Interpolations: 1 permission, view"。
  • 當使用者類型為 "Intruder" 時,範本字串的計算結果為 "Multiple Interpolitions: 0 permission"。

用 Angular pipe 插值 (Interpolation with pipe)

@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 管道以將 permissiontype 輸入大寫。

<!-- 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 內形成一個新字串。

  • typeAdmin 時,範本字串將被評估為 "Admin Component"。
  • typeUser 時,範本字串被評估為 "User Component"。
  • typeIntruder 時,範本字串將被評估為「Intruder Component"。

untagged template literals 功能是將多個字串連接成一個字串並在 Angular Expression 中對其插值的便捷方法。

參考:


.
圖片
  直播研討會

尚未有邦友留言

立即登入留言