Angular 在同一位置打开不同菜单时，角度布线存在问题

我是个新手。我遇到了这种情况：我的HomeComponent在.html页面中有一个对Appmenucomponent的“引用”。因此，我需要单击不同的菜单（每个菜单都是一个新组件）并在同一个位置（div）打开，就像HomeComponent一样

home.component.html

<div class="wrapper">
  <app-appmenu></app-appmenu>
        <div class="content-wrapper">
          <section class="content-header">
            <section class="content">
                    <h1>Welcome,  {{currentUser.firstName}}!</h1> 
                    <router-outlet></router-outlet>             
            </section>
          </section>
        </div>
</div>

  <li ><a [routerLink]="['/menu1']"><i class="fa fa-circle-o" ></i> Menu 1</a></li>

<router-outlet></router-outlet>

<p>menu1 works!</p>

home-routing.module.ts

const appRoutes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
  { path: 'login', component: ApploginComponent },
  { path: 'menu1', component: Menu1Component},

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
];

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [AuthGuard] },
];

app.component.html

<div class="wrapper">
  <app-appmenu></app-appmenu>
        <div class="content-wrapper">
          <section class="content-header">
            <section class="content">
                    <h1>Welcome,  {{currentUser.firstName}}!</h1> 
                    <router-outlet></router-outlet>             
            </section>
          </section>
        </div>
</div>

  <li ><a [routerLink]="['/menu1']"><i class="fa fa-circle-o" ></i> Menu 1</a></li>

<router-outlet></router-outlet>

<p>menu1 works!</p>

menu1.component.html

<div class="wrapper">
  <app-appmenu></app-appmenu>
        <div class="content-wrapper">
          <section class="content-header">
            <section class="content">
                    <h1>Welcome,  {{currentUser.firstName}}!</h1> 
                    <router-outlet></router-outlet>             
            </section>
          </section>
        </div>
</div>

  <li ><a [routerLink]="['/menu1']"><i class="fa fa-circle-o" ></i> Menu 1</a></li>

<router-outlet></router-outlet>

<p>menu1 works!</p>

菜单1有效

---

然后，我还有一个登录组件，它重定向到HomeComponent，其中包含菜单。

这很正常，您必须使用：

<router-outlet">
// and here you can add whatever you want
</router-outlet>

---

检查这场闪电战。这里展示了相同问题的答案。
放入homeComponent.html的section标签。这将适当地将路由器链接加载到路由器出口。我将和当我单击菜单1时打开，但不在homecomponent的同一位置。我把菜单和左边的另一个分开了。是的。这是你的主要组成部分。这就是你的app.componet，你可以把所有的东西放在一起。分享你的路线！我已经更新了路线对不起，我做错了什么。我更新了我的代码（homecomponent）以包含路由器插座，当我单击菜单1时，所有页面中都会出现Menu1.component.html消息，实际的“css”消失，包括使用新代码更新的menuI。如果你需要更多，请告诉我。但我的应用程序流程是：LoginCOmponent->HomeComponent（包含MenuComponent）。如果我单击菜单1和菜单2（两个组件），它将重定向到HomeComponent的同一位置谢谢您的解决方案。但在本例中，菜单位于app.component中。在我的例子中，我有一个要管理的登录页面，它首先出现，然后重定向到HomeComponent，在那里放置菜单和主div。如果您将所有组件模板放在app.component.html中，那么在auth.guard中，如果未登录，您需要重定向到login.html，然后在登录后，您需要延迟加载menu1和menu2组件。为此，您需要定义lazy-routine模块，为此，您可以在应用程序路由模块中为menu1和menu2使用loadchildren