web-dev-qa-db-fra.com

Masquer et afficher les 4 composantes angulaires en fonction de l'itinéraire

Bonjour, je ne suis pas sûr que cela soit possible ... En gros, je veux pouvoir afficher un composant, mais uniquement si la route correspond et masquer un composant si la route correspond. J'ai essayé cette affiche app-header-home lorsque la route est '/'qui est bon mais app-header ne montre pas du tout, même lorsque la route inst '/', comment puis-je résoudre ce problème?

app.component.html 

<app-header *ngIf="router.url == '/'"><app-header>
<app-header-home *ngIf="router.url != '/'"></app-header-home> //component I want hidden unless url '/'
<router-outlet></router-outlet>
<app-footer></app-footer>

app.component.ts 

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';

  constructor(
    private router: Router
  ) {

  }
}

Merci

javascriptangulartypescript
9
Smokey Dawson

vérifiez le router.url dans le modèle:

<app-header><app-header>
<app-header-home *ngIf="router != '/ur_route'"></app-header-home> //component I want hidden unless url /home
<router-outlet></router-outlet>
<app-footer></app-footer>

dans app.component.ts injecter la router.

export class AppComponent {
  title = 'app';
  router: string;

  constructor(private _router: Router){

          this.router = _router.url; 
    }
}
9
Sachila Ranawaka

La réponse acceptée n'a pas fonctionné, car je pense que la variable ne sera affectée qu'une seule fois. Ensuite, lors de la navigation, cette variable ne sera pas mise à jour (composant déjà initialisé).

voici comment je l'ai fait .. Nous injectons le routeur dans le composant que nous souhaitons masquer:

constructor(private _router: Router){}

puis dans notre template:

<div *ngIf="_router.url != '/login'">
  ... your component html ...
</div>
3
Chtiwi Malek