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

I am attempting to use the new router from the rc.0 release. (Actually using rc.1) However I can't get the outlet to load the "Welcome" component.

我试图使用rc.0版本中的新路由器。（实际上使用rc.1）但是我无法获得加载“欢迎”组件的插座。

Here is the app.component.ts

这是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 { 


}

Here is the main.ts

这是main.ts

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

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

I'm not sure what I a missing, the path for / should work. index.html has the base ref set to "/" as well. I've been digging through the source to see what I a missing but not finding anything.

我不确定我错过了什么，应该是/应该工作的路径。 index.html的基本引用也设置为“/”。我一直在挖掘源头，看看我遗失了什么，却找不到任何东西。

4 个解决方案

#1

This is a known issue https://github.com/angular/angular/issues/8409

这是一个已知问题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.

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

So either you inject the Router or add <a [routerLink]="..."> until this issue is fixed.

因此，无论是注入路由器还是添加，直到此问题得到解决。

#2

Looks like the constructor for AppComponent needed this:

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

export class AppComponent { 

    constructor(private _router:Router){

    }

}

Not sure why, if anyone has an answer for that?

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

#3

You still need to inject it using:

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

constructor(private _router:Router) { }

That's called dependency injection, also known as constructor injection. Your class depends on the Router. In the toplines of your code you declared where Angular could find the dependency with an import statement. You still need to instantiate (inject) the service before you can use it. That's what you declare in the constructor.

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

More info about Dependency Injection here

有关Dependency Injection的更多信息，请参阅

#4

The reason is because the Router never actually gets instantiated in your example. This happens because the RouterOutlet directive now doesn't depend on the Router service.

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

When the Router is instantiated, that's where it observes the initial URL and activates the initial routes.

当路由器被实例化时，它就会在那里观察初始URL并激活初始路由。

The fix for the time being is to force the instantiation of the router by injecting the Router manually. Or - if you happen to have routerLinks in the template - it will happen automatically as routerLink does depend on Router.

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

#1