Возникли проблемы с правильной работой Angular Routing - PullRequest
Новая
       45

Возникли проблемы с правильной работой Angular Routing

0 голосов
/ 02 октября 2019

Я почти уверен, что в моем приложении правильно настроена маршрутизация, потому что, когда я набираю правильный путь, он выводит меня и отображает правильную информацию. Где у меня возникают проблемы, это ссылка на маршрутизатор. Я считаю, что это как-то связано с 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>

Когда я нажимаю на ссылки, они показывают правильное представление, поэтому мне не нужно вводитьпуть каждый раз.

1 Ответ

0 голосов
/ 02 октября 2019

У вас есть событие размытия в элементе кнопки. В настоящее время он удаляет элемент section, когда вы находитесь вне кнопки. удалите это событие размытия из кнопки и поместите событие нажатия на элемент пользовательского интерфейса и установите для 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>
...