'router-outlet'在主模板

Question

我刚刚使用 Angular CLI 创建了一个新的角度项目，并使用以下命令在其中搭建了新的路径用户。

ng new myproj
cd myproj 
ng g route user

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

但是当我访问页面/login时，我无法看到登录模板的内容，除非我添加了某个路径的链接，即：

<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

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

Answer 3

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

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

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