使Angular路由正常工作时遇到问题

Question

我非常确定我的应用程序中的路由设置是正确的，因为当我输入正确的路径时，它会将我带到正确的位置并显示正确的信息。我遇到问题的地方是路由器链路。我想这跟HTML有关系吧？当我点击每个链接时，没有任何反应。无论如何，我会发布HTML，看看是否有人能指出我可能做错了什么。我还在这里获得了github存储库链接：https://github.com/jadenadams329/JIT1

<div class="app-bar-navbar vertical-appbar">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary app-bar-section pr-0 d-flex justify-content-start">
            <button class="navbar-toggler1 m-0 focusable" (click)="displaySideNav =!displaySideNav;" (blur)="displaySideNav = false">
                <i class="icon-menu-bold"></i>
            </button>
            <span class="vertical-line-seperator left">&nbsp;</span>
            <div class="navbar-brand d-flex align-items-center">
                <img src="assets/images/logo/secondary-logo-site.svg" class="logo-img">
                <!-- <i class="icon-bd-logo-bold"></i> -->
                <span class="brand-name">JIT Management Console</span>
            </div>
            <div class="navbar-right-content justify-content-end d-flex">
                <div class="navbar-right-toggle d-flex">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown-appbar d-flex">
                            <span class="vertical-line-seperator left">&nbsp;</span>
                            <a class="nav-link navbar-toggler" id="navbarDropdownMenuLink" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                <i class="icon-more-bold text-white rotate-90"></i>
                            </a>
                            <ul class="dropdown-menu pull-right" aria-labelledby="dLabe2">

                                <li role="separator" class="dropdown-divider"></li>
                                <li class="nav-item">
                                    <a href="#">Sign Out</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="custom-dropdown d-flex">
                    <ul class="navbar-nav">
                        <li class="nav-item dropdown-appbar d-flex">
                            <span class="vertical-line-seperator left">&nbsp;</span>
                            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                                Admin
                            </a>
                            <ul class="dropdown-menu pull-right" aria-labelledby="dLabe2">
                                <li>
                                    <a href="#">Sign Out</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
            [ngClass]="{'show':displaySideNav}">
            <nav class="nav">
                <ul class="sidebar-links">
                    <li>
                        <a routerLink="/home">Home</a>
                    </li>
                    <li>
                        <a routerLink="/manage-sessions">Manage Sessions</a>
                    </li>
                    <li>
                        <a routerLink="/export-scancodes">Export ScanCodes</a>
                    </li>
                    <li>
                        <a routerLink="/imu-data">IMU Data</a>
                    </li>
                    <li>
                        <a routerLink="/global-order-days">Global Order Days</a>
                    </li>
                    <li>
                        <a routerLink="/order-exception-report">Order Exception Report</a>
                    </li>
                </ul>
            </nav>
        </section>       
    </div>
    <div>
        <router-outlet></router-outlet>
    </div>

我期望发生的事情是，当我单击链接时，它会显示正确的视图，这样我就不必每次都键入路径。

Answer 1

按钮元素中有模糊事件。目前，只要你的焦点离开按钮，它就会移除section元素。从按钮中删除模糊事件，将单击事件放在ui元素上，并将displaySidenav设置为false。

<button class="navbar-toggler1 m-0 focusable" (click)="displaySideNav =!displaySideNav;" >
                <i class="icon-menu-bold"></i>
</button>

<ul class="sidebar-links" (click)="displaySideNav = false">
  <li>
    <a routerLink="/home">Home</a>
  </li>
  <li>
    <a routerLink="/manage-sessions">Manage Sessions</a>
  </li>
  <li>
    <a routerLink="/export-scancodes">Export ScanCodes</a>
  </li>
  <li>
    <a routerLink="/imu-data">IMU Data</a>
  </li>
  <li>
    <a routerLink="/global-order-days">Global Order Days</a>
  </li>
  <li>
    <a routerLink="/order-exception-report">Order Exception Report</a>
  </li>
</ul>