ActivatedRoute.routeConfig 为空 - Angular 2 个项目 Angular-cli
ActivatedRoute.routeConfig is null - Angular 2 project with Angular-cli
我使用 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);
}
}
我的实现有什么问题?
经过一番努力并查看我的代码,我发现了这两个应用程序之间的主要区别在于模板部分。
何时工作: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
.
如果回答的不够清楚,欢迎在评论中指出,我会及时更新
更新: 根据 的要求,已提供以下解释:
当我在与调用 <router-outlet>
相同的 xxx.component.html
中调用 <app-sidebar>
时,routeConfig
没有获得任何值,因此我按照上述更改了我的代码并且将 <app-sidebar>
移动到 home.component.html
更深的层次,这意味着我必须在每个 xxx.component.html
中调用它
我使用 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);
}
}
我的实现有什么问题?
经过一番努力并查看我的代码,我发现了这两个应用程序之间的主要区别在于模板部分。
何时工作: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
.
如果回答的不够清楚,欢迎在评论中指出,我会及时更新
更新: 根据
当我在与调用 <router-outlet>
相同的 xxx.component.html
中调用 <app-sidebar>
时,routeConfig
没有获得任何值,因此我按照上述更改了我的代码并且将 <app-sidebar>
移动到 home.component.html
更深的层次,这意味着我必须在每个 xxx.component.html