Angular 2 RC1组件路由不会加载任何内容

时间:2016-06-04 07:19:23

标签: angular angularjs-routing

我正在使用Angular 2.0.0-rc.1。我尝试使用单个路由设置路由,但没有显示任何内容。没有错误被抛出。

Main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { ROUTER_PROVIDERS } from '@angular/router';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS
]);

app.component.ts

import { Component } from '@angular/core';
import { MyComponent} from './my/my.component';
import { HTTP_PROVIDERS } from '@angular/http';
import { ROUTER_DIRECTIVES, Routes } from '@angular/router';
import 'rxjs/Rx';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [MyComponent, ROUTER_DIRECTIVES],
  providers: [HTTP_PROVIDERS]
})

@Routes([
  { path: '/', component: MyComponent }
])

export class AppComponent { }

app.component.html

<div>
    <router-outlet></router-outlet>
</div>

index.html以

开头
<html>
<head>
  <base href="/">

MyComponent的

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

@Component({
    selector: 'pr-my',
    templateUrl: 'app/my/my.component.html'
})

export class MyComponent {
}

更新: 如果我将routerLink添加到app.component.html并单击它,则内容将按预期加载。没有点击链接就不会加载。

<a [routerLink]="['/']">Home</a>

1 个答案:

答案 0 :(得分:4)

您需要注入路由器

class AppComponent {
  constructor(router:Router){}
}

这是一个已知问题。