Angular 模板语法

 

 

使用 Macro Syntax DSL 时的用法为:

<ng-container *ngComponentOutlet=“componentTypeExpression; injector: injectorExpression; content: contentNodesExpression; ngModuleFactory: moduleFactory;”>

</ng-container>

as

<div *ngIf=“(user$ | async) as user”>{{ user.name }}</div>

<div *ngFor=“let user of (users$ | async) as users; index as i”>

{{ user.name }} {{ i }} of {{ users.length }}

</div>

不过,其实 as 语法并没有增加任何功能,仅仅是将 as 翻译成对应的 let 定义,上面的代码等价于:

<div *ngIf=“user$ | async; let user = ngIf”>{{ user.name }}</div>

<div *ngFor=“let user of users$ | async; let users = ngForOf; let i = index”>

{{ user.name }} {{ i }} of {{ users.length }}

</div>

 

 

可以看出,as 语法的实现与现有的原理并不相同,例如:

<div *ngIf="user$ | async; let user = ngIf">

其中,是将 Context 的 ngIf 属性绑定到 user 变量上。而现有的(4.0.0-rc.3 及之前)的使用方式:

<div *ngIf="user$ | async; let user">

这样是将 Context 的 $implicit 属性绑定到 user 变量上。

 

此外,NgIf 还提供了判断条件的局部变量,用于支持在条件表达式中使用 Pipe 的场景:

<element *ngIf=“someExpression | somePipe; let condition”>

  Condition: {{ condition }}

</element>

 

 

 

 

即增加了 根选择器或根元素节点 作为第二个参数。

一个简单的 Demo 如 Angular Dynamic Bootstrap Demo 所示。

const dynamicRootElement = document.querySelector(‘dynamic-element’)

/* … */

class AppModule {

  /* … */

  ngDoBootstrap(appRef: ApplicationRef) {

    appRef.bootstrap(this.appCmpFactory, dynamicRootElement)

  }

}

此后,Angular 对于非 SPA 的应用场景将更加友好。

发表评论

电子邮件地址不会被公开。