Question

我有一个简单的应用程序，但我收到以下错误：

错误错误：未捕获（在承诺中）：错误：无法匹配任何路由。网址段：'aboutme'错误：无法匹配任何路由。网址细分：aboutme

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './components/header/header.component';
import { DevAngularjsComponent } from './components/dev-angularjs/dev-angularjs.component';
import { AboutmeComponent } from './components/aboutme/aboutme.component';

import { AppRoutingModule} from './app-routing/app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    DevAngularjsComponent,
    AboutmeComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    NgbModule.forRoot(),
    AppRoutingModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

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

  onNavigate(feature: string) {
    this.loadedFeature = feature;
  }
}

app.component.html

<app-header (featureSelected)="onNavigate($event)"></app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

header.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

IDE在header.component.html文件中显示routerLink“此处不允许使用属性routerLing”的警告。它的原因是什么？

header.component.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#" class="navbar-brand">LK's page</a>
    </div>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active"><a routerLink="/aboutme">About Me</a></li>
        <li routerLinkActive="active"><a routerLink="/dev-angularjs">Angular.JS ~ 2017</a></li>
      </ul>
    </div>
  </div>
</nav>

aboutme.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-aboutme',
  templateUrl: './aboutme.component.html',
  styleUrls: ['./aboutme.component.css']
})
export class AboutmeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

应用-routing.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {AboutmeComponent} from "../components/aboutme/aboutme.component";
import {DevAngularjsComponent} from "../components/dev-angularjs/dev-angularjs.component";
import {RouterModule, Routes} from "@angular/router";

const appRouting: Routes = [
  { path: '', redirectTo: './component/aboutme', pathMatch: 'full'},
  { path: 'component/aboutme', component: AboutmeComponent},
  { path: 'component/dev-angularjs', component: DevAngularjsComponent}
];

@NgModule({
  imports: [CommonModule, RouterModule.forRoot(appRouting)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

您的路径应定义为 aboutme ，

const appRouting: Routes = [
  { path: '', redirectTo: 'aboutme', pathMatch: 'full'},
  { path: 'aboutme', component: AboutmeComponent},
  { path: 'component/dev-angularjs', component: DevAngularjsComponent}
];

Angular 2 Uncaught（承诺）：错误：无法匹配任何路由。网址段：'aboutme'错误：无法匹配任何路由。网址细分：aboutme

1 个答案: