Скрыть и показать угловой 4 компонент в зависимости от маршрута

Привет там Я не уверен, если это возможно... в основном я хочу, чтобы иметь возможность показать компонент, но только если маршрут соответствует и скрыть компонент, если маршрут соответствует Ive, попробовал это app-header-home когда маршрут является '/' который хорош, но app-header вообще не отображается даже в том случае, когда маршрут inst '/' как я могу это исправить?

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

  }
}

Спасибо

Ответ 1

проверьте шаблон router.url в шаблоне:

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

в app.component.ts вводит router.

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

  constructor(private _router: Router){

          this.router = _router.url; 
    }
}

Ответ 2

Принятый ответ не сработал, потому что я думаю, что переменная будет назначена только один раз, затем, когда мы перейдем, эта переменная не будет обновлена (компонент уже инициализирован).

вот как я это сделал.. Мы внедряем роутер в компонент, который хотим скрыть:

constructor(private _router: Router){}

тогда в нашем шаблоне:

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

Ответ 3

Chtiwi Malek → Недвижимость '_router' является частной и доступна только в классе

Ответ 4

Ниже код работает для меня.

Я скрываю боковую навигацию на экране входа в систему.

 <div *ngIf="!router.url.includes('login')"  class="sidenav">

Ответ 5

Посмотрите на это руководство по угловым направляющим.

Вам понадобится метод, называемый canActivate, этот mehtod возвращает логическое значение и его в службе.

Это я, что работает, формирует меня:

{path : 'getIn', component: GetinComponent , canActivate: [GetInService] }