我的多路由器插座 link 在 Angular 中不工作

Question

我在我的 Angular 应用程序中添加了 2 router-outlet，当我为另一个 router-outlet 提供 URL 时，显示 link一些错误。

这是我的app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
import { FrontpageComponent } from './Mycomponents/frontpage/frontpage.component';
import { RegisterpageComponent } from './Mycomponents/registerpage/registerpage.component';
import { LoginpageComponent } from './Mycomponents/loginpage/loginpage.component';

const routes: Routes = [
  {path: '', component: LoginpageComponent},
  {path: 'loginpage', component: LoginpageComponent},
  {path: 'registerpage', component: RegisterpageComponent},
  {path: 'frontpage', component: FrontpageComponent, outlet: 'dashboard'},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在这里，我添加了我的路由。

这是我的app.component.html:

<div class="main_wrapper">
    <div class="container no_padding">
        <nav>
                <a routerLink="/loginpage" class="mya2">Login</a>
                <a routerLink="/registerpage" class="mya2">Register</a>
                <a [routerLink]="['frontpage']" [skipLocationChange]="true" class="mya2">Other Page</a>
            </nav>
    </div>
    <div class="container-fluid no_padding">
        <div class="row no_margin">
            <div class="col-md-12 no_padding">
                <router-outlet></router-outlet>
            </div>

        </div>
    </div>

    <div class="container no_padding">
        <div class="row">
            <router-outlet name="dashboard"></router-outlet>
        </div>
    </div>
</div>

在此，我的路由器插座名称仪表板无法正常工作意味着路由 frontpage 显示错误，路径不正确。

问题是当我点击 a tag with router link frontpage 时，它显示错误。

错误：

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'frontpage' Error: Cannot match any routes. URL Segment: 'frontpage'

非常感谢任何帮助。

Answer 1

您可以使用（outletname：route）访问辅助路由器插座示例：

localhost:4200/loginpage(dashboard:frontpage)

实例： Stackblitz

我也实施了你的案例。请参阅示例 Stackblitz

我的多路由器插座 link 在 Angular 中不工作

My multiple router outlet link is not working in Angular

routing

angular-routing

angular

angular8