【问题标题】:Cannot match any routes: ""无法匹配任何路线:“”
【发布时间】:2016-08-29 17:25:29
【问题描述】:

app.routing.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { PushComponent }      from './push/push.component';


const appRoutes: Routes = [
  { path: 'push',  component: PushComponent}
];

export const appRoutingProviders: any[] = [];

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

app.component.ts

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

@Component({
  moduleId: module.id,
  selector: 'app-root',
  template: `
     <h1>{{title}}</h1>
     <nav>        
        <a [routerLink]="['/push']">push1</a> 
        <a [routerLink]="['/push']">push2</a> 
     </nav>

      <nav>
      <a routerLink="/push" routerLinkActive="active">push3</a>
      <a routerLink="/push" routerLinkActive="active">push4</a>
    </nav>

     <router-outlet></router-outlet>
   `,
  styleUrls: ['app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

push.component.ts

@Component({
    // selector: 'push-comp',
    template:
      //   `<form (submit)="submitForm()">
      //   <input [(ngModel)]="element.name"/>
      //
      //   <button type="submit">Submit the form</button>
      // </form>
      // <br>
    `<button (click)="getHeroes()"> get </button> <button (click)="saveHeroes()"> push </button>`,
    // templateUrl: 'app/html/heroes.component.html',
    providers: [PushService]
})
export class PushComponent implements OnInit {
    pushResult:PushResult;
    // selectedHero:Hero;
    // addingHero = false;
    error:any;
    element:any;

但我有 2 个错误:

1) 我没有看到推送组件中的模板(2 个按钮)

2) 我从 chrome 浏览器收到错误 Cannot match any routes: '',但我不知道指向 '' 的链接在哪里

我已经看到了这个post,但我已经在 index.html 中看到了:

<head> <base href="/">

【问题讨论】:

  • 您在单击其中一个路由器链接时收到此错误?

标签: javascript html angular router angular-routing


【解决方案1】:

Route '' 是您的默认路由。您可以像这样添加默认路由-

const appRoutes: Routes = [
  { path: '', redirectTo: '/push', pathMatch: 'full' },
  { path: 'push',  component: PushComponent}
];

看看这是否有帮助。

【讨论】:

    猜你喜欢
    • 2018-09-29
    • 2020-06-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-09
    • 2016-10-08
    • 1970-01-01
    相关资源
    最近更新 更多