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>