编程语言
首页 > 编程语言> > javascript-如何解决：app / app.component.html：15：1中的错误,原因是：RouterOutletMap没有提供者

javascript-如何解决：app / app.component.html：15：1中的错误,原因是：RouterOutletMap没有提供者

作者：互联网

enter image description here

我在这里找到了这些答案,但是它们并没有帮助我.我猜想Angular 2还在不断变化吗？

No provider for RouterOutletMap

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

enter image description here

解决方法:

您需要导入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="/" />

标签：javascript,angular,angular2-routing
来源： https://codeday.me/bug/20191013/1908390.html