router.navigate对命名路由器插座不起作用

时间:2019-01-04 10:26:22

标签: angular angularjs-directive angular7

我正在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];

我无法在此处找到问题。我真的很感谢任何帮助。

0 个答案:

没有答案