En angle 2, Routeur.isActiveRoute ne travaille pas pour la première fois
j'utilise un routeur.isActiveRoute pour déterminer quelle route est active.
Pour la première fois je parcours vers home link ou menu link , la route change mais la classe active n'est pas ajoutée. active class est ajouté au deuxième clic.
je pense que c'est un bug de la directive Router dans angular2. S'il vous plaît dites-moi pourquoi et comment le résoudre?
app.ts
...
@Component({
selector: 'app',
directives: [ROUTER_DIRECTIVES],
templateUrl: 'app/components/app.html',
styleUrls: ['app/components/app.css']
})
@RouteConfig([
{ path: '/', component: Home, name: 'Home'},
{ path: '/menu', component: Menu, name: 'Menu'}
])
class AppComponent {
constructor(public router: Router) {
}
isActiveRoutes(routes) {
return this.router.isRouteActive(this.router.generate(routes));
}
}
app.html
<a [routerLink]="['Home']">
<div class="icon-box" [class.active]="isActiveRoutes(['/Home'])">
<i class="icon ion-ios-list-outline"></i>
</div>
</a>
<a [routerLink]="['Menu']">
<div class="icon-box" [class.active]="isActiveRoutes(['/Menu'])">
<i class="icon ion-ios-bookmarks-outline"></i>
</div>
</a>
<router-outlet></router-outlet>
Merci
2 réponses
la solution est simple. Angular2-polyfills en mouvement.JS en dessous du système.js script tag a fait l'affaire. Il s'agit d'un numéro connu #6140 . Il y a aussi un demo link .
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<ul>
<li>
<a [routerLink]="['First']">First</a>
</li>
<li>
<a [routerLink]="['Second']">Second</a>
</li>
<li>
<a [routerLink]="['Third']">Third</a>
</li>
</ul>
</div>
<router-outlet></router-outlet>
`,
styles: [".router-link-active { background-color: red; }"],
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: "/first", name: "First", component: FirstComponent},
{path: "/second", name: "Second", component: SecondComponent},
{path: "/third", name: "Third", component: ThirdComponent}
])
export class App { }
si vous utilisez Angular 4+, vous devriez utiliser la directive routerLinkActive="active" au lieu d'utiliser toute autre procédure complexe pour déterminer quelle est la route active lorsque la route actuelle n'est pas connue.
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a class="nav-link" routerLink="/about-us">About Us</a>
</li>
<li class="nav-item" routerLinkActive="active">
<a title="Contact Us" class="nav-link " routerLink="/contact-us">Contact</a>
</li>