Question

我已经在Angular应用中添加了2 router-outlet，并且当我提供其他router-outlet的URL时，链接显示了一些错误。

这是我的 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时，它显示了一个错误。

错误：

错误：未捕获（承诺）：错误：无法匹配任何路由。网址区隔：“首页”错误：无法匹配任何路线。网址段： “首页”

非常感谢您的帮助。

Answer 1

您可以使用（出口名称：route）访问辅助路由器出口。示例：

localhost:4200/loginpage(dashboard:frontpage)

实时示例： Stackblitz

我也执行了您的案件。请参见示例Stackblitz

我的多路由器出口链接在Angular中不起作用

1 个答案: