角度：ActivatedRoute的快照没有数据

Question

我有以下URL：http://localhost:4200/?token=test。我的目标是将test记录在AppComponent内。
我决定使用ActivatedRoute的快照来获取令牌：

constructor(private activatedRoute: ActivatedRoute) {
}

ngOnInit() {
  console.log(this.activatedRoute.snapshot.queryParams.token);
}

但是它打印undefined。我决定打印activatedRoute本身和快照：

console.log(this.activatedRoute);
console.log(this.activatedRoute.snapshot);

我就是这样的：

这样奇怪的行为吧？因此，我无法获取令牌。我该如何解决这个问题？

Answer 1

AppComponent 可能不合适。您应该尝试在特定的时间从与插座中加载的组件关联的路由中获取ActivatedRoute 快照。通常，在AppComponent中放置<router-outlet></router-outlet>，我们会在其中加载所有其他路线（组件），例如Home，About等。

Answer 2

网址：-http://localhost:4200/?token=test

app.component.ts

ngOnInit() {
 console.log("OnInit");
 const self  = this;
   this.activatedRoute.queryParams.pipe(filter(params => params['token']))
    .subscribe(params => {     
        self.token = params['token']; 
        console.log(params['token']); //<====== log here
       });
    }

 ngAfterViewInit(){
    console.log("ngAfterViewInit");
    const self  = this;
    this.activatedRoute.queryParams.pipe(filter(params => params['token']))
       .subscribe(params => {     
            self.token = params['token']; 
            console.log( params['token']);  //<====== log here
         });
      }
 }

Answer 3

问题在于，当应用程序组件初始化时，路由尚未初始化

因此您可以使用setTimeOut告诉它等待一个刻度，但并非100％总是可以使用

或者您可以订阅查询参数并在参数更改时获取参数，但是请注意，您将在第一次获取空对象，可以使用过滤器来防止空对象调用您的订阅函数，或者您订阅的条件，这取决于您

  ngOnInit() {
    setTimeout(() => {
      // wait a tick
      console.log(this.activatedRoute.snapshot.queryParams);
    });
    this.activatedRoute.queryParams.subscribe(params => {
      // get params whenever they change, it will print twice the first with empty object, the second with the correct token
      console.log(params.token);
    });
  }