舉這些例子:
<ng-container *ngIf="vo$ | async; let vo">
和
<ng-container *ngIf="vo$ | async as vo">
它們具有相同的目的,將 observable 的最新值放入變數vo中。
但是這兩種語法有什么區別嗎?
uj5u.com熱心網友回復:
問題可能更多地是關于結構指令的作業原理,而不是異步管道。as和let語法是結構指令使用的 Angular 模板語法的一部分。
與 Angular 模板語法方面沒有區別。它們是 Angular 模板的有效語法。
但是,它們的強型別不同。看一下ng_if.ts來自Angular源的以下代碼
/**
* @publicApi
*/
export class NgIfContext<T = unknown> {
public $implicit: T = null!;
public ngIf: T = null!;
}
結構指令作者可以幫助消費者提供強型別的背景關系。既然有as和let,背景關系也需要考慮兩者
$implicit允許let型別安全ngIf(或指令的選擇器)允許as型別安全
進一步解釋:$implicit是一個特殊屬性,它允許 a 的使用者通過以下ng-template方式獲取背景關系的隱式資料let someVar
<ng-template let-implicit let-someNamedVar="someNamedVar"></ng-template>
在 的情況下*ngIf,我們可以重寫<ng-container *ngIf它的長格式,這樣我們就可以看到它是如何NgIfContext有意義的
<!-- <ng-container *ngIf="vo$ | async as vo"></ng-container> -->
<ng-template [ngIf]="vo$ | async" let-vo="ngIf">
<ng-container></ng-container>
</ng-template>
<!-- <ng-container *ngIf="vo$ | async;let vo"></ng-container> -->
<ng-template [ngIf]="vo$ | async" let-vo>
<ng-container></ng-container>
</ng-template>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/450148.html
