javascript - Angular 6变量定义时未定义

Question

我在组件中有一个具有预定义值路径的变量。

从 Angular 6.0 升级到 6.1.7 后，显示为 undefined

export class AppComponent implements OnInit {
  path: string = '/';

  constructor(public route: Router) {
    console.log(this.path)
  }

  ngOnInit() { 
    this.route.events.subscribe((route)=>{
      this.path = (route as any).url;
    })
    this.getFeatured();
  }
}

导致模板错误的语句:

*ngIf="!path.includes('/reports') && !path.includes('/reviews') && !path.includes('/users')"

我不认为这是一个异步问题，因为它将其记录到控制台中:

Answer 1

在我跟踪你的代码之后，发生这种情况是因为订阅只是针对事件而不是路线(当然命名并不重要，只是语义)。

因此，导航周期中触发的最后一个事件是 scrollEvent，它不包含键 url，因此导致未定义。

我认为您需要通过执行类似的操作来检查触发的事件类型是否为 NavigationEnd 类型:

this.route.events.subscribe((event)=>{
    if(event instanceof NavigationEnd){
      this.path = (event as any).url;
    }
})

编辑:

以下日志可以帮助您准确理解我的意思，最新事件(或者实际上可能是更大应用程序中的任何事件)可能不包含 url 属性: