Рендеринг страницы после включения - PullRequest
Новая
       34

Рендеринг страницы после включения

0 голосов
/ 27 декабря 2018

Когда вы посмотрите на учебник по маршрутизации AngularDart Heroes, вы заметите, что у hero_component.html есть элемент проверки *ngIf null вокруг его содержимого.Это необходимо, потому что HeroComponent получает свои id из параметров текущего RouterState, и для получения доступа к 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-узел просто для проверки свойства null.Есть ли какое-либо иное решение этой проблемы, например, отложить начальную визуализацию страницы или вызвать onActivate до ngOnInit?

1 Ответ

0 голосов
/ 02 января 2019

Вы можете избежать дополнительного узла DOM, используя тег <template>, как описано здесь: https://webdev.dartlang.org/angular/guide/structural-directives#template-to-the-rescue

<template [ngIf]="hero != null">
  ...
</template>
...