ActivatedRoute.routeConfig 为空 - 使用 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在sidebar.component.ts里面是NULL。

如果答案不够清楚，欢迎在cmets中提及，我会更新的。

更新：应@alterfox的要求，已提供以下解释：

当我在调用<router-outlet> 的同一xxx.component.html 中调用<app-sidebar> 时，routeConfig 没有得到任何值，因此我按照上述更改了我的代码并将<app-sidebar> 移动到@ 内部更深的级别987654332@ 这意味着我必须在每个xxx.component.html 中调用它