2角度：ルータ

Question

は正気を失うことなく作業をルーティングゲットゴールのためにすべてのパラメータを解決できません。

エラー

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> 

Answer 1

古い投稿を気に入っていますが、同じ問題があり、解決しました。

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に慣れていないので、詳細な理由を伝えることができません！

Answer 2

ここでは、私は角度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> 

のためのあなたの時間を実行します。あなたのルータのアウトレットはどこかで宣言されていますか？私のapp.htmlでは私が持っている：

<router-outlet></router-outlet> 

Answer 3

ルーターのコンセントがapp.componentで

import {ROUTER_DIRECTIVES} from '@angular/router' 

と

directives: [ROUTER_DIRECTIVES] 

を追加app.component.htmlにあるので。 ts

私は鉱山をセットアップしていますそのように働いています。

Answer 4

モジュールをapp.moduleにインポートすると、モジュールがangleの組み込みインジェクタによってすべてのコンポーネントで使用できるようになるので、これはうまく機能します。言い換えれば、アプリケーションモジュール内のモジュールをインポートすることは、モジュールをインジェクタに組み込まれたサービスとして登録することを意味し、アプリケーション全体で使用できるようにします。あなたのケースでは

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

「ルーティング」、すでにので、角度のインジェクタによって、アプリケーション全体で利用可能なサービスとしてRouterModuleを登録app.routing.tsファイルに「RouterModule」を輸入しています。したがって、RouterModuleをコンポーネントのいずれかのサービスとして提供する必要がなくなります。