Question

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="/">

Answer 1

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

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

看看这是否有帮助。

无法匹配任何路线：＆＃34;＆＃34;

1 个答案: