Angular 6：作为参数的子路由在进入参数 link 时不会更新

Question

问题：每当我点击第一个 link 它总是 select 两个 link.

我想知道如何更新 Angular 路由组件？

路由器Link:

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

我相信，每当第一个 link 命中一个时，它总是命中甘特图和参数的父路径。 tyff .. 和长列表都来自相同的组件和死记硬背，因此它从未更新参数一。每当我单击长列表时，它总是将长列表识别为长列表，但从来没有 select 是 tyffy 列表。

请帮我解决问题。

Answer 1

你需要在每里添加（使用routerLinkActive的地方）[routerLinkActiveOptions]="{exact:true}"

使用它，您可以通过传递 exact: true 来配置 RouterLinkActive。这将仅在 url 与 link 完全匹配时添加类。

所以你的代码应该像

<li *ngIf="showMenuItem(childOfChildMenuItem)" routerLinkActive="m- 
    menu__item--active" [routerLinkActiveOptions]="{exact:true}" class="m- 
    menu__item m-menu__item--submenu">
     <a ....  </a>
</li>

Angular 6：作为参数的子路由在进入参数 link 时不会更新

Angular 6 : Child route as parameter not updated whenever it goes to parameter link

javascript

c#

asp.net

angular

angular-ui-router