Question

我在这里找到了这些答案，但他们没有帮助我。我猜Angular 2还在变化吗？

Getting Angular2 error 'No provider for Router! (RouterOutlet -> Router)'

我的app.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: 'contact', component: ContactComponent }
];

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

app.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { appRouting } from './app.routing';
import { TemplateFormComponent } from './template/template-form.component';
import { ReactiveFormComponent } from './reactive/reactive-form.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

@NgModule({
    imports: [
        RouterModule,
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        AboutComponent,
        ContactComponent
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule {}

我的app.component.ts及其模板文件

import { Component } from '@angular/core';
import { User } from './shared/models/user';

@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
    styleUrls: ['./app/app.component.css']
})
export class AppComponent {

}

<header>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="/" class="navbar-brand">Scotch.io</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>
</header>
<main>
    <router-outlet></router-outlet>
</main>

我尝试了什么：

ROUTER_DIRECTIVES

Answer 1

您需要导入appRouting模块，而不是导入RouterModule：

@NgModule({
    imports: [
        appRouting,
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],

将routerLink属性添加到您的链接：

<ul class="nav navbar-nav">
        <li><a routerLink="">Home</a></li>
        <li><a routerLink="about">About</a></li>
        <li><a routerLink="contact">Contact</a></li>
</ul>

不要忘记HTML页面中需要一个基本标记：

<html>
   <head>
      <base href="/" />

如何修复：app / app.component.html中的错误：15：1导致：没有RouterOutletMap的提供程序

我的app.routing.ts

app.module.ts

我的app.component.ts及其模板文件

我尝试了什么：

1 个答案: