Question

我正在尝试使用rc.0版本中的新路由器。（实际上使用rc.1）然而，我无法获得加载＆＃34;欢迎＆＃34;零件。

这是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的基本引用设置为＆＃34; /＆＃34;同样。我一直在挖掘源头，看看我遗失了什么，但没有找到任何东西。

Answer 1

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

如果您在没有任何路由器链接的情况下设置路由并且未注入路由器，则不会进行初始导航。

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

Answer 2

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

export class AppComponent { 

    constructor(private _router:Router){

    }

}

不确定为什么，如果有人有答案的话？

Answer 3

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

constructor(private _router:Router) { }

这称为依赖注入，也称为构造函数注入。你的课程取决于路由器。在代码的顶部，您声明了Angular可以使用import语句找到依赖项的位置。您仍然需要在使用它之前实例化（注入）该服务。这就是你在构造函数中声明的内容。

有关依赖注入 here

的详细信息

Answer 4

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

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

暂时的修复是通过手动注入Router来强制实例化路由器。或者 - 如果您在模板中碰巧有routerLink - 它会自动发生，因为routerLink 依赖于Router。

Angular 2 Rc.1路由器未加载＆＃34; /＆＃39;零件

4 个答案: