Angular 2 Rc.1 路由器未加载“/”组件

Question

我正在尝试使用 rc.0 版本的新路由器。（实际上使用 rc.1）但是我无法让插座加载 "Welcome" 组件。

这里是app.component.ts

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES} from '@angular/router';
import { HeaderComponent } from './common/header.component';
import { WelcomeComponent } from './common/welcome.component';
import { FooterComponent } from './common/footer.component';

@Component({
  selector: 'my-app',
  template: `
    <header-component> </header-component> 
        <router-outlet> </router-outlet> 
    <footer-component> <footer-component> 
  `,
  directives: [ROUTER_DIRECTIVES, HeaderComponent, WelcomeComponent, FooterComponent]
})

@Routes([
    {path: "/", component: WelcomeComponent}
]) 

export class AppComponent { 


}

这里是 main.ts

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

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

我不确定我遗漏了什么，/ 的路径应该有效。 index.html 也将基本引用设置为“/”。我一直在挖掘源代码以查看我遗漏了什么但没有找到任何东西。

Answer 1

看起来 AppComponent 的构造函数需要这个：

export class AppComponent { 

    constructor(private _router:Router){

    }

}

不知道为什么，如果有人对此有答案？

Answer 2

您仍然需要使用以下方式注入它：

constructor(private _router:Router) { }

那叫依赖注入，也叫构造函数注入。您的 class 取决于路由器。在代码的顶行中，您声明 Angular 可以使用 import 语句找到依赖项。您仍然需要实例化（注入）服务才能使用它。这就是您在构造函数中声明的内容。

有关依赖注入的更多信息here

Answer 3

原因是 Router 在您的示例中从未实际实例化。发生这种情况是因为 RouterOutlet 指令现在不依赖于 Router 服务。

实例化 Router 时，它会观察初始 URL 并激活初始路由。

目前的解决方法是通过手动注入 Router 来强制实例化路由器。或者 - 如果您碰巧在模板中有 routerLinks - 它会自动发生，因为 routerLink does 取决于 Router.

Answer 4

这是一个已知问题https://github.com/angular/angular/issues/8409

If you have routes setup without any router links and you don't inject the router, initial navigation does not occur.

因此，您要么注入 Router，要么添加 <a [routerLink]="...">，直到问题得到解决。

Angular 2 Rc.1 路由器未加载“/”组件

Angular 2 Rc.1 router not loading "/' component

router

angularjs

angular