0

我很确定我的应用程序中的路由设置正确，因为当我输入正确的路径时，它会带我去并显示正确的信息。我遇到问题的地方是路由器链接。我相信它与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>

我期望发生的是当我单击显示正确视图的链接时，我不必每次都输入路径。

4

1 回答 1

0

You have blur event in button element. Currently It's removing the section element whenever you are focused out of button. remove that blur event from button and place click event on ui element and set the displaySidenav to 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>
于 2019-10-02T17:01:38.647 回答