Question

在Angular 8中，我试图在HTML页面上设置多个路由器出口，以便不同的网页可以包含1个页面。请看看我的代码和帮助。谢谢！

app.component.html：

<div style="background-color: green;">
  <router-outlet>
  </router-outlet>
</div>

<div style="background-color:red">
  <router-outlet name="betapage">
  </router-outlet>
</div>

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AlphaComponent } from './alpha/alpha.component'
import { BetaComponent } from './beta/beta.component'

const routes: Routes = [
  { path: '', component: AlphaComponent },
  { path: 'beta', component: BetaComponent, outlet: 'betapage' }
];

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

alpha.component.html：

<p>
  alpha works!
</p>

beta.component.html：

<p>
  beta works!
</p>

当我运行该应用程序时，只有“ alpha有效！”出现，而不是“测试版有效！”。

Answer 1

主要出口和次要出口彼此独立地路由，并且可以通过将次要路径括在URL中的括号中来同时激活它们。

尝试看看是否适合您。

localhost：4200 /（betapage：beta）

同一HTML页面上的多个路由器出口

1 个答案: