外部HTMLテンプレートのrouterLinkを使用

Question

私はルート2のルーティングを学習しています。私のルートアプリケーションコンポーネントでは、template構成プロパティを使用してビュー内にナビゲーションリンクを表示しています。

app.component.cs

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
       <div style="padding:5px"> 
       <ul class="nav nav-tabs"> 
       <li routerLinkActive="active"> 
       <a routerLink="home">Home</a> 
       </li> 

       <li routerLinkActive="active"> 
        <a routerLink="employees">Employees</a> 
       </li> 

       </ul> 
       <br/> 
       <router-outlet></router-outlet> 
      </div> 
       ` 
}) 
export class AppComponent { 
} 

私は上記のクリーンと保守性を見ていないより多くのリンクを持っている、だから私が代わりにtemplateUrlプロパティを使用して別のhtmlファイル内のすべてのルータのナビゲーションリンクを持つことができる場合？以下に示すように。私はというエラーを取得し、

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    templateUrl:'/app/home/navigation_template.html' 
}) 
export class AppComponent { 
} 

はnavigation_template.htmlは

<div style="padding:5px"> 
<ul class="nav nav-tabs"> 
    <li routerLinkActive="active"> 
    <a routerLink="home">Home</a> 
    </li>     

    <li routerLinkActive="active"> 
     <a routerLink="employees">Employees</a> 
    </li>     

    </ul> 
    <br/> 
    <router-outlet></router-outlet> 
</div> 

私はそれを試してみましたが、それは動作しません：角度2および多くのための

InternalError: too much recursion Stack trace:

Answer 1

、最高これを行う方法は、特定のルーティング設定ファイルを作成することです。

私はあなたが、あなたのAppRoutingModuleをインポートすることができ、あなたが

<a routerLink="employees">Employees</a> 

をクリックしたときには、右のページに移動しますアプリ-routing.module.ts

import { RouterModule, Routes }  from '@angular/router'; 

/Redirection route 
const routes: Routes = [ 
    { 
     path: '', 
     redirectTo: '/homePage', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'employees', 
     component: EmployeesComponent, 
    }]; 


@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 

export class AppRoutingModule {} 

を作成しました。これは、ベースURL