2017-12-08 16 views
1

こんにちは私はこれが可能かどうかわかりません...基本的には、ルートが一致すればコンポーネントが表示されますが、このapp-header-homeは、ルートが'/'の場合に表示されますが、app-headerのルートがある場合でも表示されます。'/'どうすればこの問題を解決できますか?経路に応じて角度4のコンポーネントを非表示にする

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

    } 
} 

おかげ

答えて

3

チェックテンプレートで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.tsrouterを注入します。

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

    constructor(private _router: Router){ 

      this.router = _router.url; 
    } 
} 
+0

あなたが言ったことを試してみましたが、うまくいきませんでしたか? – A61NN5

+0

コンソールのエラー –

+0

コンソールのエラーはありません。新しいコード – A61NN5