5

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

ng new myproj
cd myproj 
ng g route user

然后我使用ng serve.

但是当我访问该页面时，我看不到登录模板的内容，/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>
4

3 回答 3

7

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

或者你也可以做

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

这些变通方法之一是调用路由器所必需的。

于 2016-06-03T16:23:50.117 回答
3

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

于 2016-07-26T13:47:15.137 回答
1

正如 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中，改变：
    1. Routes排队_ RouteConfig_import
    2. '@angular/router'排队_ '@angular/router-deprecated'_import
    3. @Routes给@RouteConfig装饰者
    4. 将属性添加name: 'User'到RouteConfig对象/user

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

于 2016-06-07T04:08:15.677 回答