javascript - ActivatedRoute.routeConfig 为 null - 带有 Angular-cli 的 Angular 2 项目

Question

我使用 angular-cli 创建了 2 个不同的项目。两者都工作得很好，但其中一个 routeConfig 是 null 并且不知道出了什么问题。

两个文件的package.json是一样的，所以包的版本没有任何疑问，app.modules文件也是一样的。

这是我在两个项目中获取 routeConfig 的方法:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(
    private router: ActivatedRoute
  ) { }

  ngOnInit(): void {
    console.log(this.router.routeConfig);
  }
}

我的实现有什么问题？

Answer 1

经过一番努力并查看了我的代码，我发现了这两个应用程序之间的主要区别在于模板部分。

什么时候工作:home.component.html

<div class="container bg">
  <div class="row">
    <div class="col-lg-3">
      <div class="sidebar">
        <app-sidebar></app-sidebar>
      </div>
    </div>
    <div class="col-lg-9">
      <div class="content-bar">
        <!-- Body -->
        <p>
          home works!
        </p>
        <!-- /body -->
      </div>
    </div>
  </div>
</div>

什么时候不起作用:app.component.html

<div class="container bg">
  <div class="row">
    <div class="col-lg-3">
      <div class="sidebar">
        <!-- <app-sidebar></app-sidebar> -->
      </div>
    </div>
    <div class="col-lg-9">
      <div class="content-bar">
        <!-- Body -->
        <router-outlet></router-outlet>
        <!-- /body -->
      </div>
    </div>
  </div>
</div>

需要注意的是 ActivatedRoute是NULL里面sidebar.component.ts .

如果回答的不够清楚，欢迎在评论中指出，我会及时更新。

更新:作为@alterfox的请求已提供以下解释:

当我调用 <app-sidebar>在同一xxx.component.html作为<router-outlet>被称为，routeConfig没有任何值(value)，所以我按照上述更改了我的代码并移动了 <app-sidebar>深入内部home.component.html这意味着我必须在每个 xxx.component.html 中调用它