Question

我在typeScript和angular 2中面临一个问题。我的TS类看起来如下，

'import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';

@Component({
  selector: 'app-blogdetail',
  templateUrl: './blogdetail.component.html',
  styleUrls: ['./blogdetail.component.css']
})
export class BlogdetailComponent implements OnInit {

   blogId:any;
   title:any;

    constructor(private _activatedRoute:ActivatedRoute) {
    //Does not work
     // this.blogId = this._activatedRoute.snapshot.params['id'];
    //this.title= `This is blog detail for blogID:${this.blogId}`;

   }

  ngOnInit() {
      this.blogId = this._activatedRoute.snapshot.params['id'];
    this.title= `This is blog detail for blogID:${this.blogId}`;
  }

}'

我必须在ngOnit事件中获取溃败参数。当我最初在TS类构造函数中使用相同的代码（获取参数）时，我将blogId变量值视为 undefined 。据我了解事件的顺序，它们类似于下面的图像，！[流动] https://i.stack.imgur.com/41fpe.png

我们是否必须始终在ngOnIt中获取activatedRoute快照值？

Answer 1

你是对的。发生的事情是，当您为视图启动组件时，会调用constructor。但是从那时起刚刚创建新实例，路由未被激活，因为您没有获得路由参数。另一方面，当您在OnInit中使用它时，路径被激活并且您获得了参数。尽管如此，我不认为这是最好的方法，因为你应该在你的OnInit中订阅路线参数来寻找类似的参数：

ngOnInit(){
    this.routeParamsSub = this.route.params.subscribe(routeParams => {
        this.blogId = routeParams['id']; 

       // do something else here
    });
}

在article中可以看到类似的方法。

Answer 2

在创建对象时，角度没有params。

因此，您需要在ngOnInit上使用它来将其分配给变量。

或者如果您真的想在构造函数中使用此代码，则使用observable，如下所示

@Component({...})
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: Observable<string> = route.params.map(p => p.id);
    const url: Observable<string> = route.url.map(segments => segments.join(''));
    // route.data includes both `data` and `resolve`
    const user = route.data.map(d => d.user);
  }
}

虽然在构造函数中使用ActivatedRoute不是一个好习惯，但我相信。

参考： ActivatedRoute-interface

activatedRoute快照在TS类构造函数中不起作用

2 个答案: