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

Question

问题:每当我单击第一个链接时，它总是选择这两个链接。

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

路由器链接:

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

我相信，每当第一个链接点击一个链接时，它总是点击父路由，即甘特图和参数。 tyff.. 和长列表都来自相同的组件和死记硬背，所以它从未更新参数一。每当我单击长列表时，它总是识别为长列表，但从不选择 tyffy 列表。

请帮我解决问题。

Answer 1

您需要在每个li(使用routerLinkActive的地方)添加[routerLinkActiveOptions]="{exact:true}"

使用它，您可以通过传递exact: true来配置RouterLinkActive。仅当 url 与链接完全匹配时才会添加类。

所以你的代码应该是这样的

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