3

我创建了 2 个不同的项目，使用angular-cli. 两者都可以完美地工作，但其中一个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);
  }
}

我的实施有什么问题？

4

1 回答 1

0

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

工作时：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<app-sidebar>home.component.htmlxxx.component.html

于 2017-11-13T04:53:05.390 回答