隐藏和显示角度4分量(取决于路线) [英] Hide and Show angular 4 component depending on route

问题描述

您好，我不确定这是否可行...基本上，我希望能够显示一个组件，但前提是该路由匹配，并且如果该路由匹配，则隐藏一个组件. '/'这很好，但是即使在路由实例'/'时也完全不显示app-header?

Hi there Im not sure if this is possible... basically I want to be able to show a component but only if the route matches and hide a component if the route matches Ive tried this app-header-home shows when the route is '/'which is good but app-header doesnt show at all even when the route inst '/' how can I fix this?

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

  }
}

谢谢

推荐答案

检查模板中的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; 
    }
}

这篇关于隐藏和显示角度4分量(取决于路线)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！