时间戳

首页 > 解决方案 > 如何使用多个带角

html - 如何使用多个带角

问题描述

我用过很多次路由器插座，但从没想过要使用很多。当我尝试创建一个带有导航栏的登录页面时，我基本上考虑过这一点，然后我想如果我在一个页面中创建多个导航栏会怎样。

我试图搜索角度文档，但我什么也不懂，绝对没有。最后的想法来了，在堆栈溢出中问我的问题。

<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>

登录 忘记密码

这基本上是我的登录页面/忘记了密码，如您所见，我有一个导航栏和我的路由器 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("...");

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

问题

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

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

标签： htmlcssangular

解决方案

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

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

推荐阅读