Angular 6: дочерний маршрут в качестве параметра не обновляется при переходе к ссылке на параметр - PullRequest
Новая
       27

Angular 6: дочерний маршрут в качестве параметра не обновляется при переходе к ссылке на параметр

0 голосов
/ 17 октября 2018

Проблема: всякий раз, когда я нажимаю на 1-ю ссылку, она всегда выбирает обе ссылки.

enter image description here

Я хочу знать, как можно обновить компонент углового маршрута?

Маршрутизатор: 

{ path: 'gantt/:id', component: GanttWorkItemsComponent, data: { permission: 'Pages.WorkItems' } },
                { path: 'gantt', component: GanttWorkItemsComponent, data: { permission: 'Pages.WorkItems' } },

Код компонента: 

constructor(
    injector: Injector,
    private _http: Http,
    private _workItemsServiceProxy: WorkItemsServiceProxy,
    private _notifyService: NotifyService,
    private _tokenAuth: TokenAuthServiceProxy,
    private _activatedRoute: ActivatedRoute,
    private _fileDownloadService: FileDownloadService,
    private params: ActivatedRoute ) {

    super(injector);

    this._activatedRoute.params.subscribe(val => {
        var paramId = params.snapshot.params["id"];

        if (paramId) {
            this.initiativeFilter = paramId;
            this.nameFilter = 'strategy.id=' + this.initiativeFilter;

        }
    });
}

HTML-шаблон: 

<nav id="m_ver_menu"
 class="{{ui.getSideBarMenuClass()}}"
 data-menu-vertical="true"
 [attr.data-menu-dropdown]="ui.getIsMenuDropdown()"
 [attr.data-menu-scrollable]="ui.getIsMenuScrollable()"
 data-menu-dropdown-timeout="500"
 [attr.aria-label]="l('LeftMenu')">
<ul class="m-menu__nav {{ui.getMenuListClass()}}"
    role="menubar"
    [attr.aria-label]="l('LeftMenu')">
    <ng-template ngFor let-menuItem [ngForOf]="menu.items" let-mainMenuItemIndex="index">
        <li *ngIf="showMenuItem(menuItem)" routerLinkActive="m-menu__item--active" class="m-menu__item m-menu__item--submenu" [ngClass]="{'m-menu__item--expanded m-menu__item--open': menuItem.items.length >  0}" aria-haspopup="true" data-menu-submenu-toggle="hover">

            <a [routerLink]="[menuItem.route]" *ngIf="!menuItem.items.length && !menuItem.external" class="m-menu__link m-menu__toggle"
               role="menuitem"
               aria-haspopup="true"
               aria-expanded="false"
               [attr.tabindex]="mainMenuItemIndex == 0 ? 0 : -1">
                <i class="m-menu__link-icon {{menuItem.icon}}"></i>
                <span class="m-menu__link-text">
                    <span class="title">{{l(menuItem.name)}}</span>
                </span>
            </a>

            <a [attr.href]="[menuItem.route]" *ngIf="!menuItem.items.length && menuItem.external" class="m-menu__link m-menu__toggle" target="_blank"
               role="menuitem"
               aria-haspopup="true"
               aria-expanded="false"
               [attr.tabindex]="mainMenuItemIndex == 0 ? 0 : -1">
                <i class="m-menu__link-icon {{menuItem.icon}}"></i>
                <span class="m-menu__link-text">
                    <span class="title">{{l(menuItem.name)}}</span>
                </span>
            </a>

            <a href="javascript:;" *ngIf="menuItem.items.length" class="m-menu__link m-menu__toggle"
               role="menuitem"
               aria-haspopup="true"
               aria-expanded="false"
               [attr.tabindex]="mainMenuItemIndex == 0 ? 0 : -1">
                <i class="m-menu__link-icon {{menuItem.icon}}"></i>
                <span class="m-menu__link-text">
                    <span class="title">{{l(menuItem.name)}}</span>
                </span>
                <i class="m-menu__ver-arrow la la-angle-right"></i>
            </a>
            <nav class="m-menu__submenu" *ngIf="menuItem.items.length" [attr.aria-label]="l(menuItem.name)">
                <span class="m-menu__arrow"></span>
                <ul class="m-menu__subnav"
                    [attr.aria-label]="l(menuItem.name)"
                    role="menu">
                    <ng-template ngFor let-childMenuItem [ngForOf]="menuItem.items" let-mainMenuItemIndex="index">
                        <li *ngIf="showMenuItem(childMenuItem)" routerLinkActive="m-menu__item--active" class="m-menu__item m-menu__item--submenu"
                            aria-haspopup="true"
                            data-menu-submenu-toggle="hover"
                            role="none">
                            <a [routerLink]="[childMenuItem.route]" *ngIf="!childMenuItem.items.length && !childMenuItem.external" class="m-menu__link m-menu__toggle"
                               role="menuitem"
                               aria-haspopup="true"
                               aria-expanded="false"
                               tabindex="-1">
                                <i class="m-menu__link-icon {{childMenuItem.icon}}"></i>
                                <span class="m-menu__link-text">
                                    <span class="title">{{l(childMenuItem.name)}}</span>
                                </span>
                            </a>
                            <a [attr.href]="[childMenuItem.route]" *ngIf="!childMenuItem.items.length && childMenuItem.external" class="m-menu__link m-menu__toggle" target="_blank"
                               role="menuitem"
                               aria-haspopup="true"
                               aria-expanded="false"
                               tabindex="-1">
                                <i class="m-menu__link-icon {{childMenuItem.icon}}"></i>
                                <span class="m-menu__link-text">
                                    <span class="title">{{l(childMenuItem.name)}}</span>
                                </span>
                            </a>
                            <a href="javascript:;" class="m-menu__link m-menu__toggle" *ngIf="childMenuItem.items.length"
                               role="menuitem"
                               aria-haspopup="true"
                               aria-expanded="false"
                               tabindex="-1">
                                <i class="m-menu__link-icon {{childMenuItem.icon}}"></i>
                                <span class="m-menu__link-text">
                                    <span class="title">{{l(childMenuItem.name)}}</span>
                                </span>
                                <i class="m-menu__ver-arrow la la-angle-right"></i>
                            </a>
                            <nav class="m-menu__submenu" *ngIf="childMenuItem.items.length" [attr.aria-label]="l(menuItem.name)">
                                <span class="m-menu__arrow"></span>
                                <ul class="m-menu__subnav"
                                    [attr.aria-label]="l(menuItem.name)"
                                    role="menu">
                                    <!-- Menu Level 3 -->
                                    <ng-template ngFor let-childOfChildMenuItem [ngForOf]="childMenuItem.items" let-childOfChildMenuItemIndex="index">
                                        <li *ngIf="showMenuItem(childOfChildMenuItem)" routerLinkActive="m-menu__item--active " class="m-menu__item m-menu__item--submenu"
                                            aria-haspopup="true"
                                            role="none"
                                            data-menu-submenu-toggle="hover">
                                            <a [routerLink]="[childOfChildMenuItem.route]" *ngIf="!childOfChildMenuItem.items.length && !childOfChildMenuItem.external" class="m-menu__link m-menu__toggle"
                                               role="menuitem"
                                               aria-haspopup="true"
                                               aria-expanded="false"
                                               tabindex="-1">
                                                <i class="m-menu__link-icon {{childOfChildMenuItem.icon}}"></i>
                                                <span class="m-menu__link-text">
                                                    <span class="title">{{l(childOfChildMenuItem.name)}}</span>
                                                </span>
                                            </a>
                                            <a [attr.href]="[childOfChildMenuItem.route]" *ngIf="!childOfChildMenuItem.items.length && childOfChildMenuItem.external" class="m-menu__link m-menu__toggle" target="_blank"
                                               role="menuitem"
                                               aria-haspopup="true"
                                               aria-expanded="false"
                                               tabindex="-1">
                                                <i class="m-menu__link-icon {{childOfChildMenuItem.icon}}"></i>
                                                <span class="m-menu__link-text">
                                                    <span class="title">{{l(childOfChildMenuItem.name)}}</span>
                                                </span>
                                            </a>
                                            <a href="javascript:;" class="m-menu__link m-menu__toggle" *ngIf="childOfChildMenuItem.items.length"
                                               role="menuitem"
                                               aria-haspopup="true"
                                               aria-expanded="false"
                                               tabindex="-1">
                                                <i class="m-menu__link-icon {{childOfChildMenuItem.icon}}"></i>
                                                <span class="m-menu__link-text">
                                                    <span class="title">{{l(childOfChildMenuItem.name)}}</span>
                                                </span>
                                                <i class="m-menu__ver-arrow la la-angle-right"></i>
                                            </a>
                                            <nav class="m-menu__submenu" *ngIf="childOfChildMenuItem.items.length" [attr.aria-label]="l(menuItem.name)">
                                                <span class="m-menu__arrow"></span>
                                                <ul class="m-menu__subnav"
                                                    [attr.aria-label]="l(menuItem.name)"
                                                    role="menu">
                                                    <!-- Menu Level 4 -->
                                                    <ng-template ngFor let-childOfChildOfChildMenuItem [ngForOf]="childOfChildMenuItem.items" let-childOfChildMenuItemIndex="index">
                                                        <li *ngIf="showMenuItem(childOfChildOfChildMenuItem)" routerLinkActive="m-menu__item--active " class="m-menu__item m-menu__item--submenu"
                                                            role="none">
                                                            <a [routerLink]="[childOfChildOfChildMenuItem.route]" *ngIf="!childOfChildOfChildMenuItem.external" class="m-menu__link"
                                                               role="menuitem"
                                                               aria-haspopup="true"
                                                               aria-expanded="false"
                                                               tabindex="-1">
                                                                <i class="m-menu__link-icon {{childOfChildOfChildMenuItem.icon}}"></i>
                                                                <span class="m-menu__link-text">
                                                                    <span class="title">{{l(childOfChildOfChildMenuItem.name)}}</span>
                                                                </span>
                                                            </a>
                                                            <a [attr.href]="[childOfChildOfChildMenuItem.route]" *ngIf="childOfChildOfChildMenuItem.external" class="m-menu__link" target="_blank"
                                                               role="menuitem"
                                                               aria-haspopup="true"
                                                               aria-expanded="false"
                                                               tabindex="-1">
                                                                <i class="m-menu__link-icon {{childOfChildOfChildMenuItem.icon}}"></i>
                                                                <span class="m-menu__link-text">
                                                                    <span class="title">{{l(childOfChildOfChildMenuItem.name)}}</span>
                                                                </span>
                                                            </a>
                                                        </li>
                                                    </ng-template>
                                                </ul>
                                            </nav>
                                        </li>
                                    </ng-template>
                                </ul>
                            </nav>
                        </li>
                    </ng-template>
                </ul>
            </nav>
        </li>
    </ng-template>
</ul>

IПоверьте, всякий раз, когда 1-я ссылка попадает на одну, она всегда попадает на родительский маршрут, который представляет собой Гант и параметрОба tyff .. и длинный список из одного и того же компонента и rote, так что он никогда не обновляется для параметра один.Всякий раз, когда я нажимаю на длинный список, он всегда распознается как длинный список, но никогда не выбирает более длинный.

Пожалуйста, помогите мне решить проблемы.

1 Ответ

0 голосов
/ 17 октября 2018

Вам нужно добавить в каждый li (где используется routerLinkActive) [routerLinkActiveOptions]="{exact:true}"

, используя это, вы можете настроить RouterLinkActive, передав точное: true.Это добавит классы только тогда, когда URL-адрес точно соответствует ссылке.

Таким образом, ваш код должен выглядеть так: 

<li *ngIf="showMenuItem(childOfChildMenuItem)" routerLinkActive="m- 
    menu__item--active" [routerLinkActiveOptions]="{exact:true}" class="m- 
    menu__item m-menu__item--submenu">
     <a ....  </a>
</li>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...