は、ルートURLに基​​づいてコンポーネントを有効

Question

ルートURLに基​​づいて、特定のコンポーネントを有効にする方法

、

マスターページ

app.component.html

にある次のように私は、コンポーネントを持っていますこの状態のアプリケーションのURLで

<div class="col-md-7"> 
<headerBar ></headerBar> 
</div> 
<div class="col-md-4"> 
    <fd-login></fd-login> 
</div> 

次のように示し、

http://localhost:3000/en/search 

上記以外の状態でのみ表示されるようにヘッダーバーを非表示にしたいのですが、ngIfを使用してhtmlで確認する方法や別の方法がありますか？あなたは、ルータのイベントをサブスクライブして、URLに応じてプロパティを設定することができ

Answer 1

：

constructor(router:Router) { 
    router.events 
    .filter(e => e instanceof NavigationEnd) 
    .forEach(e => console.log(e.url); 
} 

Answer 2

GünterZöchbauer@は、あなたがこのようなものが必要であること、言おうとしています。

メインのアプリケーションコンポーネントを作成したら、ルータのアウトレットでそのコンポーネントにhtmlファイルをリンクします。

<div class="container"> 
<router-outlet></router-outlet> 
</div> 

次に、ルータの設定ファイルにコンポーネントとさまざまなパスが表示されます。

export const rootRouterConfig = [ 
    {path: '', redirectTo: 'home', pathMatch: 'full'}, 
    {path: 'home', component: HomeSectionComponent}, 
    {path: 'search', component: SearchSectionComponent}, 
    {path: 'login', component: LoginSectionComponent}, 
]; 

次に、これをアプリケーションコンポーネントとともにメインモジュールにインポートします。

これにより、1つのコンポーネントを1つの状態にマップして、他のコンポーネントを表示しないという望ましい結果が得られます。

私がここに示したものよりも詳細に説明されているので、Angularウェブサイトに進んでください。彼らにはチュートリアルがあります。チュートリアルを読んだり、コーディングしたりすることでルーティングの仕組みを学ぶことができます。通常、ルータは何をするかだhttps://angular.io/docs/ts/latest/guide/architecture.html