Цель

Получите маршрутизацию без потери рассудка.

Ошибка

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>
8
Donnie 7 Сен 2016 в 17:44

4 ответа

Лучший ответ

Оцените старую публикацию сейчас, но у меня была такая же проблема, и я только что ее решил.

Ошибка сообщает, что Angular не может разрешить некоторые зависимости класса Router.

< Сильный > 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, поэтому не могу дать вам подробную причину, почему!

8
banan3'14 16 Авг 2018 в 00:09

Вы заставили его работать, потому что при импорте модуля в app.module модуль становится доступным для всех компонентов с помощью встроенного инжектора angular. Другими словами, импорт модуля в модуль приложения также означает регистрацию модуля как службы со встроенным инжектором angular, что делает его доступным для всего приложения. В твоем случае

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

"routing" уже импортирует "RouterModule" в файл app.routing.ts, таким образом регистрируя RouterModule как службу, доступную для всего приложения инжектором angular. Таким образом, отпадает необходимость предоставления RouterModule в качестве службы в любом из компонентов.

1
Zeeshan Cornelius 30 Июн 2017 в 16:33

Вот код из личного проекта, над которым я работал, используя Angular 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>
1
dev53 7 Сен 2016 в 15:07

Поскольку розетка вашего маршрутизатора находится в app.component.html , добавьте

import {ROUTER_DIRECTIVES} from '@angular/router'

А также

directives: [ROUTER_DIRECTIVES]

В app.component.ts

Моя настроена вот так, и она работает.

0
mrinalmech 7 Сен 2016 в 16:27