页面初始化后加载api数据

Question

你知道如何加载页面，然后加载其中的某个组件吗？

例如，我有一个带有导航栏和API调用组件（显示表格）的页面。

我希望加载页面，我们会看到导航栏，然后 API 调用组件才会被激活。

谢谢！

Answer 1

您可以使用 ngAfterViewInit 生命周期钩子来确保视图完全初始化后执行语句。

您可以在此处阅读更多相关信息

基本上，你需要做::

export SomeComponent implements AfterViewInit

ngAfterViewInit() {}

如果您将导航栏放置在单独的组件中并在单独的组件中填充 api 数据，请执行以下操作::

在导航组件内，

在 HTML 中：您可以放置

<router-outlet></router-outlet>

在 TS 中：在

ngAfterViewInit()

内，执行

router.navigate()

如果您觉得需要更多帮助，请添加评论:)

Answer 2

这是我为您整理的快速 StackBlitz，只需将请求部分相应地移动到所需的生命周期事件中即可。

我应该提到，最佳实践是将实际请求移至服务中，然后从组件触发请求。

import {
  Component,
  OnInit,
  AfterViewInit
} from '@angular/core';
import {
  HttpClient
} from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  todos: Array < Todo > ;

  constructor(private http: HttpClient) {
    this.http.get('https://jsonplaceholder.typicode.com/todos').subscribe((data: Todo[]) => {
      this.todos = data;
    });
  }

  ngOnInit(): void {
    console.log('ngOnInit');
  }

  ngAfterViewInit(): void {
    console.log('ngAfterViewInit');
  }


}
export interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

Answer 3

对于那些使用 router-outlet 和 url 标签的人，例如在标头中，您可以使用 routerLink 仅加载内部组件（我最近发现了这一点）。

例如，通过拥有“主”路径，您可以：

<a routerLink="/home">Home</a>

一些文档： 法语： https://guide-angular.wishtack.io/angular/routing/mise-en-place-du-routing

英语：https://www.pluralsight.com/guides/activating-routes-with-routerllink-in-angular