Hide und Show eckig 4 ​​Komponente je nach Route

Question

Hallo ich bin nicht sicher, ob das möglich ist ... im Grunde möchte ich eine Komponente anzeigen können, aber nur wenn die Route übereinstimmt und eine Komponente ausblenden, wenn die Route Ive ausprobiert Diese app-header-home zeigt, wenn die Route ist '/' die ist gut, aber app-header zeigt überhaupt nicht, auch wenn die Route inst '/' Wie kann ich das beheben?

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

    } 
} 

Dank

Answer 1

Überprüfung der router.url in der Vorlage:

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

in app.component.ts injizieren Sie die router.

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

    constructor(private _router: Router){ 

      this.router = _router.url; 
    } 
}