角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：無法解析的所有參數的路由器

回答

相關問題