ngClass分配，但浏览器没有显示样式

我正在构建一个angular4和bootstrap 3.3.7类的应用程序。我有一个列表：ngClass分配，但浏览器没有显示样式

<ul class="nav nav-sidebar"> 
    <li><a [routerLink]="['/home']" [ngClass]="{'active': isActive(['home'])}">Overview </a></li> 
    <li><a [routerLink]="['/businessList']" [ngClass]="{'active': isActive(['businessList'])}">Businesses</a></li> 
    <li><a [routerLink]="['/storeList']" [ngClass]="{'active': isActive(['storeList'])}">Stores</a></li> 
</ul>

当我点击任何Ø项目的类是正确分配，我可以看到选择哪一个（看到这是高亮显示），但是当我使用浏览器的后退按钮， isActive函数被调用，我发现它按预期工作（当URL匹配被评估的路由时返回true），但类没有被应用，所以即使我看到正确的路由器 - 出口。

我有算法中使用这种方法的尝试：

<li><a [routerLink]="['/storeList']" [class.active]="isActive(['storeList'])">Stores</a></li>

但结果是一样的，该方法被调用，retunrs的预期值，但该项目不突出。

这是我的package.json：

{ 
    "name": "WebApp", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "ng": "ng", 
    "start": "ng server --proxy proxy.conf.json", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update --standalone false --gecko false", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^4.4.0-RC.0", 
    "@angular/common": "^4.4.0-RC.0", 
    "@angular/compiler": "^4.4.0-RC.0", 
    "@angular/compiler-cli": "^4.4.0-RC.0", 
    "@angular/core": "^4.4.0-RC.0", 
    "@angular/forms": "^4.4.0-RC.0", 
    "@angular/http": "^4.4.0-RC.0", 
    "@angular/platform-browser": "^4.4.0-RC.0", 
    "@angular/platform-browser-dynamic": "^4.4.0-RC.0", 
    "@angular/platform-server": "^4.4.0-RC.0", 
    "@angular/router": "^4.4.0-RC.0", 
    "bootstrap": "^3.3.7", 
    "core-js": "^2.4.1", 
    "ng2-file-input": "^0.1.13", 
    "ng2-file-upload": "^1.2.1", 
    "ngx-bootstrap": "^1.9.3", 
    "rxjs": "^5.4.3", 
    "ts-helpers": "^1.1.1", 
    "typescript": "^2.5.2", 
    "zone.js": "^0.8.17" 
    }, 
    "devDependencies": { 
    "@angular/compiler-cli": "^4.3.6", 
    "@types/jasmine": "2.5.38", 
    "@types/node": "^6.0.42", 
    "angular-cli": "1.0.0-beta.28.3", 
    "codelyzer": "~2.0.0-beta.1", 
    "jasmine-core": "2.5.2", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "1.2.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-remap-istanbul": "^0.2.1", 
    "protractor": "~4.0.13", 
    "ts-node": "1.2.1", 
    "tslint": "^4.3.0", 
    "typescript": "~2.0.3" 
    } 
}

我缺少什么？让我知道如果有任何其他信息会有所帮助。

来源

2017-09-16 Tomas Maldonado

您可以使用routerLinkActive指令：

<li><a routerLink="/storeList" routerLinkActive="active">Stores</a></li>

此外，在引导，要active类适用于li代替：

<li routerLinkActive="active"><a routerLink="/storeList">Stores</a></li>

注意，像一个你是一个简单的链接使用，您可以直接应用字符串值而不是数组表示法。

来源

2017-09-16 16:46:26 GurV

这是我的第一个方法，但它不起作用，当你按下浏览器的后退按钮，我试过这个，因为它是在这个问题中提出的：[link]（https://stackoverflow.com/questions/39271654/routerlinkactive-for-routerlink-with-parameters-dynamic/40528170＃40528170） –

@Tomas - 你可以分享一个重现你的问题的重击者吗？ – GurV

@Tomas对于你的静态链接，这种方法应该工作得很好。请分享一个Plunker演示来重现这个问题。 – GurV

ngClass分配，但浏览器没有显示样式

回答

相关问题