Angular项目注入Router服务失败问题排查

嘿，我一眼就发现你的问题啦！你在构造函数里注入了Router服务，但没有把它声明为组件类的成员属性，所以在ngOnInit里尝试用this.router访问时，会因为找不到这个变量而报错。

解决方法（两种方式，推荐第一种） #

方式一：用访问修饰符自动声明属性（Angular推荐写法）

在构造函数的router参数前加上private、public或protected修饰符，Angular会自动把这个参数转化为类的成员属性，这样你就能在组件的任何地方通过this.router访问它了：

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

@Component({
 selector: 'app-stream-live-main',
 templateUrl: './stream-live-main.component.html',
 styleUrls: ['./stream-live-main.component.scss'],
})
export class StreamLiveMainComponent implements OnInit{
 // 加上private修饰符，自动转为类属性
 constructor(private router: Router) { }

 ngOnInit() {
 console.log(this.router.url);
 }
}

方式二：手动声明并赋值属性

如果更习惯手动管理类属性，也可以先在类里声明router，再在构造函数里赋值：

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

@Component({
 selector: 'app-stream-live-main',
 templateUrl: './stream-live-main.component.html',
 styleUrls: ['./stream-live-main.component.scss'],
})
export class StreamLiveMainComponent implements OnInit{
 // 手动声明属性
 private router: Router;

 // 构造函数里赋值
 constructor(router: Router) { 
   this.router = router;
 }

 ngOnInit() {
 console.log(this.router.url);
 }
}

额外检查（如果还是有问题） #

• 确认你的根模块（一般是AppModule）已经导入了RouterModule.forRoot(...)，只有这样Router服务才能被正常注入。
• 运行ng serve重启开发服务器，确保代码修改生效。

内容的提问来源于stack exchange，提问作者Kelvin.Y