查看AngularDart Heroes路由教程时，您会注意到hero_component.html的内容周围有一个*ngIf空检查div。这是必需的，因为HeroComponent从当前id的参数中获取其RouterState，并且为了访问RouterState，必须实现{{1} }钩子。
onActivate在渲染HTML之后调用 @override
void onActivate(_, RouterState current) async {
final id = getId(current.parameters);
if (id != null) hero = await (_heroService.get(id));
}
钩子，因此onActivate可以为空。
hero对我来说，这似乎是一段非常丑陋的代码，因为您必须引入一个新的DOM节点才能对属性进行空检查。是否有其他解决方案，例如延迟初始页面渲染或在<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>
之前调用onActivate？
答案 0 :(得分：1)
您可以使用<template>标签来避免多余的DOM节点，如下所述：https://webdev.dartlang.org/angular/guide/structural-directives#template-to-the-rescue
<template [ngIf]="hero != null">
...
</template>