我正在Angular7中使用命名的路由器插座,并尝试使用router.navigate函数从组件重定向。但这会引发此错误
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'additem'
这是我的代码:
<button mat-button (click)="AddItem()">Add Item</button>
<button mat-button (click)="BookItem()">Book Item</button>
<a mat-button [routerLink]="[{ outlets: {mainOutlet: 'additem'}}]">Add item</a>
<a mat-button [routerLink]="[{ outlets: {mainOutlet: 'bookitem'}}]">Book item</a>
<router-outlet name='mainOutlet'></router-outlet>
使用[routerLink]的链接有效,但是按钮无效。
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-topnav',
templateUrl: './topnav.component.html',
styleUrls: ['./topnav.component.css']
})
export class TopnavComponent implements OnInit {
constructor(public router: Router) { }
ngOnInit() {
}
AddItem(){
this.router.navigate(['additem']);
}
BookItem(){
this.router.navigate([{ outlets: {mainOutlet: 'bookitem'}}]);
}
}
我也尝试过:
this.router.navigate(['additem', { outlets: {mainOutlet: 'additem'}}]);
app-routing-module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { IndexComponent } from './index/index.component';
import { AdditemComponent } from './additem/additem.component';
import { BookitemComponent } from './bookitem/bookitem.component';
const routes: Routes = [
{ path: "", component: IndexComponent, pathMatch: 'full' },
{ path: "home",
component: HomeComponent ,
children: [
{ path: 'additem', component: AdditemComponent, outlet: "mainOutlet" },
{ path: 'bookitem', component: BookitemComponent, outlet: "mainOutlet" }
]
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const routingComponents = [IndexComponent, HomeComponent, AdditemComponent, BookitemComponent];
我无法在此处找到问题。我真的很感谢任何帮助。