javascript - 停止在路线更改时重新加载整个内容

Question

我有一条如下所示的路线:page/:id ，它为每个 id 加载不同的内容。但是，每次我转到不同的页面时，它都会重新加载整个内容。我只想重新加载来自 API 的数据。

导航:

<ul>
 <li [routerLink]="['/page', 1]">Page 1</li>
 <li [routerLink]="['/page', 2]">Page 2</li>
 <li [routerLink]="['/page', 3]">Page 3</li>
</ul>

模板: <h1 *ngIf="data">{{data.name}}</h1>

组件:

export class DataComponent implements OnInit {

  data: any;
  error: any;

  constructor(
    private route: ActivatedRoute,
    private service: DataService
  ) {}

  ngOnInit() {
    this.getData();
  }

  getData() {
    this.service.getData()
      .subscribe(
        res => this.data = res,
        error => this.error = error
      );
  }

}

如果您转到此Plunker ，每次路线改变时，您都会看到黑色矩形闪烁。理想情况下，黑色部分保持不变，只有里面的数据会改变。

我还注意到只有当我使用 HTTP 调用时才会发生这种闪烁行为。如果我在该组件中有其他东西，那么更改路线时就不会发生这种情况。

关于如何解决这个问题有什么想法吗？

编辑:Here's a Plunkr显示预期的行为。但是，我使用的是前 ROUTER_DIRECTIVES ，现已弃用。

Answer 1

出现闪烁是因为当您导航时， DataComponent 被销毁并重新构建，但在新数据从服务器到达之前它无法显示，因为您使用 *ngIf="data" 阻止了其显示。 On this plunker ，我在服务器响应中添加了 1 秒的延迟，以使问题变得明显。请注意，只有 DataComponent 会闪烁。 PagesComponent 的其余部分则不然。

On this plunker ，没有可见的闪烁，因为数据是硬编码的，因此无需等待服务器的响应。

为了减轻闪烁，不要使用 *ngIf 因为这会完全从 dom 中删除元素。 On this plunker ，即使在等待服务器数据到达时也不会发生闪烁。

基本上，只要您选择隐藏元素直到数据到达，每当组件重新初始化时您都会看到闪烁。