경로에 따라 각도 4 성분 숨기기 및 표시

경로에 따라 각도 4 성분 숨기기 및 표시

안녕하세요. 저는 이것이 가능한지 잘 모르겠습니다.기본적으로 구성 요소를 보여주고 싶지만 경로가 일치하는 경우에만 표시하고 경로가 일치하는 경우 구성 요소를 숨깁니다.app-header-home경로가 다음과 같은 경우를 표시합니다.'/'좋은 일이지만app-header경로 inst에서도 전혀 표시되지 않습니다.'/'제가 이걸 어떻게 고칠 수 있을까요?

app.component.vmdk

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

이는 다음이 게시한 댓글을 참조한 것입니다.SUNIL JADHAV라우터 핸들을 템플릿에 노출하는 대신 함수 내부에서 정의하고 템플릿에서 호출할 수 있습니다.

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

@Component({
  selector: 'my-component',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.scss']
})
export class MyComponent implements OnInit {

  constructor(
    private router: Router,
  ) {}

  ngOnInit() {
  }


  /**
   * Check if the router url contains the specified route
   *
   * @param {string} route
   * @returns
   * @memberof MyComponent
   */
  hasRoute(route: string) {
    return this.router.url.includes(route);
  }
}

그러면 html 파일에서 우리는 그렇게 사용할 수 있습니다.

<!-- First view -->
<div *ngIf="hasRoute('home')">
    First View
</div>

<!-- Second view activated when the route doesn't contain the home route -->
<div *ngIf="!hasRoute('home')">
    Second View
</div>

변수가 한 번만 할당되고 탐색할 때 해당 변수가 업데이트되지 않기 때문에 승인된 답변이 작동하지 않았습니다(구성 요소가 이미 초기화됨).

제가 한 방법은 이렇습니다.숨기려는 구성 요소에 라우터를 주입합니다.

constructor(private _router: Router){}

템플릿에서 다음과 같이 표시됩니다.

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

아래 코드가 저에게 효과가 있었습니다.

로그인 화면에서 사이드 내비게이션을 숨기고 있습니다.

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

언급URL : https://stackoverflow.com/questions/47707225/hide-and-show-angular-4-component-depending-on-route