获取Angular2错误'没有路由器提供商!(RouterOutlet - > Router)'

Question

我使用Angular2 alpha39和Babel来转换ES6 JS文件.我没有使用打字稿.

我创建了一个正确显示的组件.我在模板上添加了一个路由器插座.当我运行应用程序时,我收到错误消息:

没有路由器提供商!(RouterOutlet - >路由器)

调用堆栈是:

以下是代码片段:

模板:

.... // Removed for brevity
<div class="contenttext">
    <router-outlet></router-outlet>
</div>
.... // Removed for brevity

组件文件:

import { Component, View, bootstrap,  OnInit } from 'angular2/angular2';
import { RouteConfig, RouterOutlet, RouterLink } from 'angular2/router';
import 'reflect-metadata';
import 'winjs';

@Component({
    selector: 'dashboard-app'
})
@View({
    templateUrl: '../js/dashboard.html',
    directives: [ ContentComponent, FamiliesComponent, RouterOutlet, RouterLink ]
})
@RouteConfig([ 
    { path: '/employees', component: EmployeesComponent, as: 'employees'} 
]) 
class DashboardAppComponent implements OnInit {
    constructor() {
    }

    onInit() {
        WinJS.UI.processAll().done(function() {
            var splitView = document.querySelector(".splitView").winControl;
            new WinJS.UI._WinKeyboard(splitView.paneElement);
        })
    }
}

bootstrap(DashboardAppComponent);

Answer 1

你必须使用:

1. 你的bootstrap中的ROUTER_BINDINGS.
2. 在index.html中.
3. 如果可能的话,使用国家即"雇员"作为"雇员".(在alpha 42中我用这种方式解决了一个问题).

我希望这肯定会对你有所帮助.

--UPDATE--

在释放alpha41之后:

1. ROUTER_BINDINGS已经改变了ROUTER_PROVIDERS.
2. 路由器别名应采用驼峰式方式.
3. 对于Router-outler和router-link,您只需要ROUTER_DIRECTIVES在组件注释中的directives属性中导入.
4. Router-link期望该值是路由名称的数组.了解更多信息.请参考这里.

更多信息有关路由可以参阅本教程在这里.

--- UPDATE2 ---

1. 现在(从alpha-49开始)路由器被导出为ng.router.

2. (根据alpha-47所有生命周期钩子改名为.)

   onActivate,onReuse,onDeactivate,canReuse,canDeactivate

   至 : -

   routerOnActivate,routerOnReuse,routerOnDeactivate,routerCanReuse,routerCanDeactivate

--- UPDATE3 ---

1. router-link 改为 routerLink

2. 和routeconfig属性更改为:

   {path: '/abc', component: ABC, as: 'abc'} 至: {path: '/xyz' , component: XYZ, name: 'xyz'}

- 更新4 -

更新到ANGULAR2 RC

RC中的路由有很多变化在RC之后,其中一些点我在这里提到可以帮助某人: -

1. angular2/router已更改@angular/router (也可以使用导入的旧功能,@angular/router-deprecated但现在我们必须使用@angular/router).

2. @RouteConfig已经改变了@Routes.

例如 :-

@Routes([
  {path: '/crisis-center', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent}
])

Answer 2

2.0.0-alpha.36 (2015-08-31)

• routerInjectables 被重命名为 ROUTER_BINDINGS

2.0.0-alpha.41 (2015-10-13)

• ROUTER_BINDINGS 被重命名为 ROUTER_PROVIDERS

使用ROUTER_PROVIDERS

ROUTER_PROVIDERS 用于简化路由器的引导.

这包括:

• RouterRegistry - 注册路线的集合
• LocationStrategy = PathLocationStrategy - 按路径匹配

ROUTER_PROVIDERS除非您需要不同的路线,否则应提供"理智"默认值LocationStrategy.

更改:

bootstrap(DashboardAppComponent);

至:

bootstrap(DashboardAppComponent, [
  ROUTER_PROVIDERS
]);

资料来源:

• 角/提交/ ccfadb9
• 角/ PR#4654

2.0.0-alpha.38 (2015-10-03)

路由别名需要是CamelCase(技术上是PascalCase)

注意:Pardeep在#3下的答案中已经提到过这一点

如果要在模板中包含指向路径的链接,router-link则必须确保name路径的别名(即属性)为PascalCase.

如果您使用计划使用router-link修改路线:

{ path: '/employees', component: EmployeesComponent, name: 'Employees'}

然后,您可以在模板中添加以下链接:

<a [router-link]="['/Employees']">Employees Link</a>

RouterLink 动态插入与路径路径匹配的href.

注意:阅读问题/ pr看起来这个更改是为了防止用户将<route-link>绑定与路由URL 混淆

资料来源:

• https://groups.google.com/d/msg/angular/IF3_UCJt340/6AgSF76XAwAJ
• 角/问题#4318
• 角/ PR#4643

小费:

如果要简化视图指令的使用 ROUTER_DIRECTIVES

这包括:

• RouterLink
• RouterOutlet

更新:

在不久的将来,RouterOutlet/ <router-outlet>将被重命名为RouterViewport/<router-viewport>

资源:

• 角/问题#4679

更新2:

• 该RouteConfig物业as已更名为name

资源:

• 角/提交/ 7d83959