Question

在我的Angular 5个项目中,I ve got a postsgil nav-bar menu. routerLinkActive 这条道路的开端正好像:

<li [routerLinkActive]="[ active ]">
  <a [routerLink]="[ /entity/teacher ]">Teacher</a>
</li>

the Code above activates the menu item nicely for `/entity/teacher/add and more

问题在于,我ve着一个包罗万象的导航项目,其中含有一些不划线的东西:

<li [routerLinkActive]="[ active ]">
  <a [routerLink]="[ /config ]">Configuration</a>
</li>

我愿在此强调,不仅在<代码>/config上,而且在<代码>/entity/dings上,也强调此项目。

问题在于,我可以改变手脚。我怎么能把菜单项目与路道连接起来?

Answer 1

您可以使用模板参考变量来查阅外线,然后在外线运行时适用这一类别。你们要么把他们与现有的航道联系起来。关联性元素或隐性元素。这里是使用隐蔽方法的一个例子。

<li routerLinkActive="active" [ngClass]="{ active : tasksActive.isActive || settingsActive.isActive }">
  <a [routerLink]="[ /config ]">Configuration</a>
</li>
<a routerLink="/tasks" routerLinkActive #tasksActive="routerLinkActive" style="display: none"></a>
<a routerLink="/entity/settings" routerLinkActive #settingsActive="routerLinkActive" style="display: none"></a>

Answer 2

如果您重新研究如何防止多种联系的出现,则有<条码>[路径之三LinkActiveOptions]=“{exact:真实}>:

<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">home</a>

Answer 3

For my scenario with a drop down menu (using an hidden *ngIf directive, i.e. tje dropdownMenu part) the template variables solution (described above by Teddy Stern) had to be modified a bit for it to work, note only one template variable:

<li class="nav-item dropdown" dropdown routerLinkActive #colActive="routerLinkActive">
    <a class="nav-link" style="padding-left: 0.25rem" dropdownToggle aria-expanded="false"
        [ngClass]="{ active : colActive.isActive }">
        <i class="fa fa-handshake"></i> Colleagues
    </a>
    <ul class="dropdown-menu" *dropdownMenu>
        <li>
            <a class="dropdown-item" [routerLink]="[ user ]">
                <i class="fa fa-fw fa-user"></i> Users
            </a>
        </li>
        <li>
            <a class="dropdown-item" [routerLink]="[ team ]">
                <i class="fa fw-fw fa-users"></i> Teams
            </a>
        </li>
    </ul>
</li>

这是因为你可以将指令适用于相关内容的传承,见。

Answer 4

因此,你应该指出:

[routerLinkActiveOptions]=“{exact: real}”

类似:

<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]=“{exact: real}”>Home

Answer 5

as specified there are multiple routerLinks but only one routerLinkActive show highlight or enabled.for that this works fine for me.

<a class="nav-link" href="javascript:void(0)" routerLink= /rulesConfiguration  routerLinkActive= active  [ngClass]="{ active : createRules.isActive}"><i class="nav-icon fa fa-list-alt "></i>Rules Configuration</a>
<a class="nav-link" href="javascript:void(0)" routerLink="/createRules" routerLinkActive #createRules="routerLinkActive" style="display: none"><i class="nav-icon fa fa-list-alt "></i>Rules </a>

Answer 6

对我来说,这项工作是:

<li [routerLinkActive]="[ active ]">
    <a routerLink="/config">Configuration</a>
    <a routerLink="/tasks" style="display: none"></a>
    <a routerLink="/entity/settings" style="display: none"></a>
</li>

友情链接