角2：无法解析的所有参数的路由器

获取不失理智路由工作。

错误

Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?)

app.routing.ts

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 

import { NavbarComponent } from './navbar/navbar.component'; 
import { CustomerComponent } from './customer/customer.component'; 

export const appRoutes: Routes = [ 
    { path: '', redirectTo: 'customers', pathMatch: 'full' }, 
    { path: 'customers', component: CustomerComponent }, 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { BrowserModule } from '@angular/platform-browser'; 

import { routing } from './app.routing'; 
import { AppComponent } from './app.component'; 
import { NavbarComponent } from './navbar/navbar.component'; 
import { CustomerComponent } from './customer/customer.component'; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     FormsModule, 
     routing 
    ], 
    declarations: [ 
     AppComponent, 
     NavbarComponent, 
     CustomerComponent, 
    ], 
    providers: [ 
     // ... 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
    // ... 
}

个

app.component.ts

import { RouterLink } from '@angular/router'; 
import { HTTP_PROVIDERS } from '@angular/http'; 
import { Component } from '@angular/core'; 

import { NavbarComponent } from './navbar/navbar.component'; 
import { CustomerComponent } from './customer/customer.component'; 

export { Config } from './config/env.config'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    directives: [NavbarComponent, CustomerComponent], 
    providers: [HTTP_PROVIDERS, RouterLink] 
}) 
export class AppComponent 
{ 
    constructor() { 
     // console.log('Environment config', Config); 
    } 

    ngOnInit() { 
     // ... 
    } 
}

navbar.component.ts

import { Router, ROUTER_DIRECTIVES } from '@angular/router'; 
import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'navbar', 
    templateUrl: 'navbar.component.html', 
    styleUrls: ['navbar.component.css'], 
    directives: [ROUTER_DIRECTIVES], 
    providers: [Router], 
}) 
export class NavbarComponent 
{ 
    version: string; 
    versionIsVisible: boolean; 

    constructor() { 
     this.version = '<%= VERSION %>'; 
    } 

    ngOnInit() { 
     // ... 
    } 
}

app.component.html

<navbar></navbar> 

<router-outlet></router-outlet>

navbar.component。 HTML

<a routerLink="/customers">Customers</a>

来源

2016-09-07 Donnie

你确定你在'app.component.html'中有'？ –

是的，我喜欢。（我更新了这篇文章以包含它。） – Donnie

欣赏旧帖子，但我有同样的问题，并刚刚解决它。

错误建议Angular无法解析某些路由器类的依赖关系。

navbar.component.ts

import { Router, ROUTER_DIRECTIVES } from '@angular/router'; 
import { Component } from '@angular/core'; 

@Component({ 
moduleId: module.id, 
selector: 'navbar', 
templateUrl: 'navbar.component.html', 
styleUrls: ['navbar.component.css'], 
directives: [ROUTER_DIRECTIVES], 
providers: [Router], 
})

我解决了这个问题通过不注射路由器作为一个供应商，只有注入的构造函数，所以你最终有：

@Component({ 
moduleId: module.id, 
selector: 'navbar', 
templateUrl: 'navbar.component.html', 
styleUrls: ['navbar.component.css'], 
directives: [ROUTER_DIRECTIVES] 
}) 

export class NavbarComponent 
{ 
version: string; 
versionIsVisible: boolean; 

constructor(private _router: Router) { 
    this.version = '<%= VERSION %>'; 
} 

ngOnInit() { 
    // ... 
}

}

我是angular2的新手，所以我无法给你详细的理由！

来源

2016-12-07 08:47:52

我也在向供应商阵列添加“路由器”。删除此参数。在构造函数中进行引用。而已。 – LargeDachshund

这对我有用。它不需要作为提供者添加，而且在最新版本中不需要“ROUTER_DIRECTIVES” – Lucas

这里是一个个人项目，我已经使用角2 RC5工作一些代码和具有路由器的工作。我直接从文档中使用了这些信息，所以可能对您有所帮助。

app.routing.ts

import { Routes, RouterModule } from '@angular/router'; 
import { HomeComponent } from '../home/home.component'; 
import { ApprovalsComponent } from '../approvals/approvals.component'; 

const appRoutes : Routes = [ 
{ 
path: 'Home', component: HomeComponent , 
data: { Title: 'Home'} 
}, 
{ 
path: 'Approvals', component: ApprovalsComponent, 
data: { Title: 'My Approvals'} 
}] 


export const appRoutingProviders: any[] = [ 


]; 

export const routing = RouterModule.forRoot(appRoutes);

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http' 

import { AppComponent } from './app.component'; 
import { HomeComponent } from '../home/home.component' 
import { ApprovalsComponent } from '../approvals/approvals.component' 
import { routing, appRoutingProviders } from './app.routing' 

@NgModule({ 
    imports:  [ BrowserModule, routing, HttpModule, BrowserModule], 
    declarations: [ AppComponent, HomeComponent, ApprovalsComponent], 
    providers : [appRoutingProviders], 
    bootstrap: [ AppComponent ] 
    }) 

export class AppModule { }

HTML的routerlink

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

你^ h你的路由器插座宣布某处？在我app.html我：

<router-outlet></router-outlet>

来源

2016-09-07 15:07:38 dev53

我修改了我的版本以反映这些更改，但是没有更改错误。是的，我在'app.component.html'中有''标签。 – Donnie

嗯......你使用的是什么版本的@ angular/router？ – dev53

'“@ angular/router”：“3.0.0-rc.1”' – Donnie

因为你的路由器出口在app.component.html添加

import {ROUTER_DIRECTIVES} from '@angular/router'

和

directives: [ROUTER_DIRECTIVES]

在app.component。 ts

我有我的设置像这样，它的工作。

来源

2016-09-07 16:27:05 mrinalmech

谢谢，我已经实现了这个，尽管它没有解决错误。 – Donnie

你得到它的工作原理是因为当在app.module中导入一个模块时，模块通过angular内建的注入器获得所有组件的可用模块。换言之，在应用程序模块中导入模块也意味着将模块注册为角度内置注入器的服务，从而使其可供整个应用程序使用。在你的情况

@NgModule({ 
    imports:  [ BrowserModule, routing, HttpModule, BrowserModule], 
    declarations: [ AppComponent, HomeComponent, ApprovalsComponent], 
    providers : [appRoutingProviders], 
    bootstrap: [ AppComponent ] 
    })

“路由”已经在app.routing.ts文件导入“RouterModule”因此注册RouterModule由角的喷油器可用于整个应用程序的服务。因此，它消除了在任何组件中提供RouterModule作为服务的必要性。

来源

2017-06-30 16:33:39

角2：无法解析的所有参数的路由器

回答

相关问题