외부 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입니다 라우터 말의 머리에 index.html 파일에

<base href="/"> 

을 넣어하는 것을 잊지 마세요