时间戳

首页 > 解决方案 > router.navigate 不适用于命名路由器插座

angular - router.navigate 不适用于命名路由器插座

问题描述

我在 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'}}]);

应用路由模块：

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];

我无法在这里找到问题。我真的很感激这方面的任何帮助。

标签： angularangularjs-directiveangular7

解决方案

推荐阅读