Angular2 예외 : 오류 : 알려지지 않은 (약속 있음) : 오류 : 경로와 일치하지 않음 :

Question

router.navigateByUrl 메서드를 사용할 때 현재 내 Angular2 앱에 문제가 있습니다. 나는 그렇게 보이는, goToRoute라고 내 구성 요소의 기능을 가지고 : ...

내가 그렇게처럼 내 HTML에 ngFor이을 사용

router.goToRoute(route:string, event?:Event):void { 
     if (event) { 
      if (event.defaultPrevented) { 
       return; 
      } 
      event.preventDefault(); 
     } 

     this.router.navigateByUrl(route); // prefixing with '/' does nothing here... 
     // if the menu has been clicked and it was open close it! 
     if (this.menuOpen) { 
      this.toggleHamburger(); 

} }

<div *ngFor="let route of routes "> 
    <div (click)="goToRoute(route.path, $event)"> {{ route.display }} </div> 
</div> 

이제 div를 클릭하면 오류가 발생합니다.

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'about-us' 
zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'about-us' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'about-us'(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426 
zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes: 'about-us'(…) 

이 내가 (DisplayRoutes 내가 루트 개체를 확장하여 만든 사용자 정의 유형) 다음과 같은 한 내 노선과 같이 이상하다 :

export const routes:DisplayRoutes = [ 
    { 
     path: '', 
     display: 'Home', 
     component: HomeComponent 
    }, { 
     path: 'about-us', 
     display: 'About us', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      } 
     ] 
    }, { 
     path: 'teams', 
     display: 'Teams', 
     component: LeftSubNavigation, 
     index: { 
      component: DetailMoreLayout 
     }, 
     children: [ 
      { 
       path: ':id', 
       component: DetailMoreLayout 
      } 
     ] 
    } 
]; 

당신은 내가 '에 대해 - 우리'라는 경로가 어떻게 알 수 있듯이! 웬일인지, 이름의 일치에도 불구하고 길은 일치하지 않고있다? 나는 현재 "@angular/router": "3.0.0-beta.2"에 "@ngrx/router": "^1.0.0-beta.1"로 전환하고

about-us MouseEvent {isTrusted: true, screenX: 1809, screenY: 382, clientX: 42, clientY: 144…} 

나는 ... 나는이있어 ... 전달되고 있었는지보고 출력 route 및 event 내 goToRoute 방법에 콘솔 로그를 넣어. 기본 태그가 있습니다. 단지 router.navigateByUrl을 사용할 때 충돌이 발생합니다. 그런 다음 브라우저에서 http://localhost:4200/about-us으로 갈 때 예를 들어 깊은 링크를하면 동일한 문제가 발생한다는 것을 알았습니다.

모든 조언을 주시면 감사하겠습니다.

Answer 1

거기에 접두사 '/'가 있어야합니다.

두 번째로 about-us가 비 종결 경로 (자식 있음)이므로 ''(empty) 경로로 자식을 정의해야합니다. 기존 경로로 리디렉션 될 수 있습니다.

{path: '', redirectTo: 'other-path', pathMatch: 'full'} 

둘째 나는 그것이 기본 경로 타입이 아니므로 확장이 설정에서 디스플레이 및 인덱스 VAR의 처리됩니다 가정합니다.

공식 tutorial

multi level routing을 사용하는 방법을 자세히 또 다른 그래서 질문에서보세요.