如何在 Angular 中完全加载页面后调用函数？答案

【问题标题】：How to call function after page fully loaded in Angular?如何在 Angular 中完全加载页面后调用函数？
【发布时间】：2021-09-23 07:28:28
【问题描述】：

我正在尝试在页面完全加载后调用特定路由上的函数，例如如果用户先登录并进入主页面路由，并且成功加载，函数将自行调用/调用.

constructor( private router: Router) {
  this.router.events.subscribe((event: Event) => {
   if (event instanceof NavigationEnd) { 
      
     console.log(router.url);
     //function writes here
      
    }
  });
  
  }

我在 main.ts 上调用了这个函数，但是当用户尝试登录这个函数时调用为什么？

【问题讨论】：

你是说函数在 main.ts..？
是的，它在 main.ts 中

标签： angular routes

【解决方案1】：

我认为如果您需要使用一个调用自身的函数或在用户登录时页面完全加载后检查，用户应该在 ngOnInit 中调用它。

ngOnInit() {
 //please call your function
}

【讨论】：

【解决方案2】：

每次更改页面时都会调用此 observable...尝试在您感兴趣的页面上应用过滤器

this.router.events
    .pipe(
      takeUntil(this.unsubscribe),
      filter((x): x is NavigationEnd => x instanceof NavigationEnd),
      map(x => x.url == 'your url')
    )
   .subscribe(...)

【讨论】：