onActivate 后渲染页面
Render page after onActivate
当您查看 AngularDart Heroes 路由教程时,您会注意到 hero_component.html
对其内容进行了 *ngIf
空检查 div。这是必需的,因为 HeroComponent
从当前 RouterState
的参数中获取其 id
,为了访问 RouterState
,您必须实现 onActivate
钩。
@override
void onActivate(_, RouterState current) async {
final id = getId(current.parameters);
if (id != null) hero = await (_heroService.get(id));
}
onActivate
挂钩在 HTML 渲染后被调用,因此 hero
可能为空。
<div *ngIf="hero != null">
<h2>{{hero.name}}</h2>
<div>
<label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name" />
</div>
<button (click)="goBack()">Back</button>
</div>
对我来说,这看起来是一段非常丑陋的代码,因为您必须引入一个新的 DOM 节点来对 属性 进行空检查。这个问题有没有其他解决方案,比如延迟初始页面呈现或在 ngOnInit
之前调用 onActivate
?
您可以使用 <template>
标签避免额外的 DOM 节点,如下所述:https://webdev.dartlang.org/angular/guide/structural-directives#template-to-the-rescue
<template [ngIf]="hero != null">
...
</template>
当您查看 AngularDart Heroes 路由教程时,您会注意到 hero_component.html
对其内容进行了 *ngIf
空检查 div。这是必需的,因为 HeroComponent
从当前 RouterState
的参数中获取其 id
,为了访问 RouterState
,您必须实现 onActivate
钩。
@override
void onActivate(_, RouterState current) async {
final id = getId(current.parameters);
if (id != null) hero = await (_heroService.get(id));
}
onActivate
挂钩在 HTML 渲染后被调用,因此 hero
可能为空。
<div *ngIf="hero != null">
<h2>{{hero.name}}</h2>
<div>
<label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name" />
</div>
<button (click)="goBack()">Back</button>
</div>
对我来说,这看起来是一段非常丑陋的代码,因为您必须引入一个新的 DOM 节点来对 属性 进行空检查。这个问题有没有其他解决方案,比如延迟初始页面呈现或在 ngOnInit
之前调用 onActivate
?
您可以使用 <template>
标签避免额外的 DOM 节点,如下所述:https://webdev.dartlang.org/angular/guide/structural-directives#template-to-the-rescue
<template [ngIf]="hero != null">
...
</template>