2016-05-31 4 views
2

Angular의 빅 팬, 나는 첫 번째 테스트 앱을 빌드하기 위해 라우팅 (https://angular.io/docs/ts/latest/guide/router.html)에 대한 Angular2 공식 문서를 읽고 이해할 수없는 동작을 수행했습니다. 그것은 작동라우터 링크가 Angular2에서 필수 항목 인 이유는 무엇입니까?

template: ` 


<h1>Component Router</h1> 
    <nav> 
    <a [routerLink]="['/crisis-center']">Crisis Center</a> 
    <a [routerLink]="['/heroes']">Heroes</a> 
    </nav> 
    <router-outlet></router-outlet> 
`, 

: 같은 AppComponent에서

내 템플릿 부분이 보인다. 내 브라우저에 URL을 직접 입력하거나 routerLink 지시문에 의해 생성 된 정의 된 링크를 클릭하여/위기 센터 또는 영웅에 액세스 할 수 있습니다.

지금은 더 이상 내비게이션 메뉴를 표시하고 싶지 않지만 브라우저 막대에 직접 URL을 입력하여 내 앱이/위기 센터 또는/영웅으로 이동할 수있게하려는 경우 nav 블록을 제거하고 템플릿은 다음과 같습니다 :

template: ` 
    <h1>Component Router</h1> 
    <router-outlet></router-outlet> 
`, 

그러나이 새 버전은 구성 요소 관련 콘텐츠를 표시하지 않으며 상위 템플릿 부분 만 표시합니다.
참고 : routerLink 지시문을 하나만 사용하면 구성 요소 영웅과 위기 센터를 모두 탐색 할 수 있습니다.

내가 발견 한 유일한 해결책은 내 탐색 태그에 디스플레이 : 없음을 적용하는 것이 었습니다.

왜 지침 routerLink 라우팅이 작동해야합니까? 나에게 그것은 URL을 생성하고 라우팅 프로세스에 영향을주지 않는 지시어 일뿐입니다 ...

답변

2

이것은 알려진 문제입니다. 또는 루트 구성 요소에 라우터를 삽입 할 수 있습니다.

export class AppComponent { 
    constructor(router Router){} 
} 

이러한 해결 방법 중 하나가 없으면 라우터가 인스턴스화되지 않아 아무 것도 수행하지 않습니다.

+0

이 하나를 놓치 셨습니다. 고마워요! – krakax