'router-outlet' 在主模板上没有 'routerLink' 就无法工作

Question

我刚刚使用 Angular CLI 创建了一个新的 angular 项目并搭建了一个新的路由 user 在其中使用以下命令。

ng new myproj
cd myproj 
ng g route user

然后我运行 Angular CLI 服务器使用 ng serve.

但是我在访问页面/login时看不到登录模板的内容，除非我在某些路由中添加link，即：

<a [routerLink]="['/user']">User Info</a>

当我添加上面的行时，router-outlet 会被填满，但如果我去掉这一行，router-outlet 会再次呈现为空。

这里发生了什么？

有人知道为什么会这样吗？

示例文件

/src/app/myproj.component.ts

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'myproj-app',
  templateUrl: 'myproj.component.html',
  styleUrls: ['myproj.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS]
})
@Routes([
  {path: '/user', component: UserComponent}
])
export class MyprojAppComponent {
  title = 'Main Component working!';
}

/src/app/myproj.component.html

<h1>{{title}}</h1>
<router-outlet></router-outlet>

以及无法理解的解决方法

<a [routerLink]="['/user']">User Info</a>

/src/app/+user/user.component.ts

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

@Component({
  moduleId: module.id,
  selector: 'app-user',
  templateUrl: 'user.component.html',
  styleUrls: ['user.component.css']
})
export class UserComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

/src/app/+user/user.component.html

<p>
  It should be showing but it isn't!
</p>

Answer 1

这是新 RC 路由器中的一个已知问题。

或者你也可以

export class MyprojAppComponent {
  constructor(router:Router) {}

调用路由器需要这些解决方法之一。

Answer 2

正如 Gunter 所说，这是当前 RC 的一个已知错误（这里是几个问题之一：https://github.com/angular/angular-cli/issues/989）。 angular 教程和许多其他教程现在采用的方法是使用 @angular/router-deprecated。从 ng new myproj 和 ng g route user 之后开始，您需要执行以下操作：

npm install --save @angular/router-deprecated
在 src/system-config.ts 中，将 @angular/router 更改为 barrels 数组中的 @angular/router-deprecated。
在 src//app/myproj.component.ts 中，更改：
1. Routes 到 RouteConfig 在 import 行
2. '@angular/router' 到 '@angular/router-deprecated' 在 import 行
3. @Routes 到 @RouteConfig 装饰器
4. 将属性 name: 'User' 添加到 RouteConfig 对象中 /user

此外，请注意，对于预 RC 路由器中的链接，您会执行 <a [routerLink]="['User']">User Info</a>（即引用 name 而不是 path）。

Answer 3

我花了几个小时才返回空 [routerLink]。控制台上没有错误。我必须在 index.html 的 header 上添加 <base href="/">。在那之后它起作用了。

'router-outlet' 在主模板上没有 'routerLink' 就无法工作

'router-outlet' not working without a 'routerLink' on the main template

angular2-routing

angular-cli

angular

示例文件

/src/app/myproj.component.ts

/src/app/myproj.component.html

/src/app/+user/user.component.ts

/src/app/+user/user.component.html