ngClassが割り当てられていますが、ブラウザがスタイルを表示していません

Question

私はangular4とbootstrap 3.3.7のクラスを持つアプリケーションをビルドしています。 、

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

私はクラスが正しく割り当て、私が選ばれた1見ることができている商品数Oいずれかをクリックし（それが強調表示されていることを見て）、私はブラウザの[戻る]ボタンを使用する場合：私は、リストを持っていますisActive関数が呼び出され、期待どおりに動作することがわかります（URLが評価されているルートと一致するとtrueを返します）が、クラスが適用されないため、右のルーターが表示されていても、出口。

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

が、結果は同じで、メソッドが呼び出され、期待値をretunrsが、項目がハイライト表示されていないれる。

私はALGOは、このアプローチを使用して試みました。

これは私の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" 
    } 
} 

私は何をしないのですか？他の情報が参考になる場合は、私に知らせてください。 1のような単純なリンクのためにあなたがしていること

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

注：

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

はまた、ブートストラップでは、あなたの代わりにliにactiveクラスを適用したい：

Answer 1

あなたはrouterLinkActiveディレクティブを使用することができますを使用すると、配列表記の代わりに文字列値を直接適用できます。