html - 如何在 Angular 中使用多个 <router-outlet>

Question

我用过很多次路由器 socket ，但从未想过要用很多。当我尝试制作一个带有导航栏的登录页面时，我基本上想到了这一点，然后我想如果我在一个页面中制作多个导航栏会怎样。

我试图搜索 Angular 文档，但我什么都不懂，绝对什么都不懂。最后的想法是在堆栈溢出中问我的问题。

<div class="row no-gutters">

  <div class="leftside">
    <img src="assets/truck.jpeg">
  </div>

  <div class="rightside">
    <h1 class="title">Route Optimization</h1>
    <br>
    <app-loginbar></app-loginbar>
    <router-outlet></router-outlet>
  </div>

</div>

Login Forgot Password

这基本上是我的登录页面/忘记密码，如您所见，我有一个导航栏和它下面的路由器 outler 标签。

<ul class="nav justify-content-center">
    <li class="nav-item">
        <button class="nav-button-left" (click)="changeSignIn()">
            <h3 class="navelement" id="signin" style="border-bottom: 2px solid gray;">Sign In</h3>
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-button-right" (click)="changeForgot()">
            <h3 class="navelement" id="forgot">Forgot Password</h3>
        </button>
    </li>
</ul>

我的导航栏只是两个按钮的列表: - 都更新导航栏的下划线并使用此功能从一个组件移动到另一个组件:

this.router.navigateByUrl("...");

我想要的是拥有一个全新的页面。我不希望出现登录/忘记密码导航栏。这就是我所面临的:

Problem

如您所见，我有导航栏和“主要作品!”同样，我只想要一个带有“主要作品”的新总页!出现。

我没有遇到任何错误，我只是不知道该怎么做。

Answer 1

您正在寻找命名路由器导出。有了这个，一个人可以在一个页面上有多个 router-outlets，其中只有一个可以不命名。在你的路由配置中，你需要指定 outlet 属性来指定哪个组件应该加载到哪个 outlet

文档位于:https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets