Discussion :

[michel.di]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<h1>test</h1>

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.

[keokaz]

bonjour,

essayer ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 
@Component({
  selector: 'activity',
  templateUrl: 'template',
  styles: [ styles ]
})

pourquoi mettre en const votre template ?

j'ai fait un tuto sur l'outlet ...

http://profoad.education/moodle3/mod...iew.php?id=683

quel est la version de angular 2??