Angular 2 et router-outlet
Bonjour à tous,
J'ai un petit soucis avec le router-outlet.
J'ai une page qui comprend un menu sur la gauche de la page et selon l'item du menu cliqué, la partie droite de la page doit changer.
Le html de la page home.html dont la route est '/home' est le suivant :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <div class="app">
<nav>
<ul>
<li><span class="glyphicon glyphicon-calendar"></span><a routerLink="/home/activite">Gestion d'activité</a></li>
</ul>
</nav>
<div class="main">
<router-outlet></router-outlet>
</div>
</div> |
Mes routes sont définies de cette manière :
Code:
1
2
3
4
5
6
7
8
9
| export const routes: Routes = [
{ path: '', component: Login },
{ path: 'login', component: Login },
{ path: 'signup', component: Signup },
{ path: 'home/activite', component: Activity, canActivate: [AuthGuard] },
{ path: 'home', component: Home, canActivate: [AuthGuard] },
{ path: '**', component: Login },
]; |
Le composant Activity est :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| const styles = require('./activity.css');
const template = require('./activity.html');
@Component({
selector: 'activity',
template: template,
styles: [ styles ]
})
export class Activity {
jwt: string;
decodedJwt: string;
response: string;
api: string;
constructor(private route:ActivatedRoute, public router: Router, public http: Http, public authHttp: AuthHttp) {
this.jwt = localStorage.getItem('id_token');
this.decodedJwt = this.jwt && window.jwt_decode(this.jwt);
}
} |
La page activity.html ne contient que le code suivant :
Lorsque je clique sur l'item du menu, au lieu de remplacer la partie droite de la page il me remplace toute la page et je ne vois que le contenu de la page activity.html.
D'où vient le problème?
Merci d'avance pour vos réponses.
