2017-02-15 15 views
4

여러 라우터 콘센트 URL에 슬래시 라우터 링크가 앱 구성 요소 내에있는 한. 그러나 모든 페이지에서 다시 사용할 수 있도록 내부에 메뉴가있는 기본 레이아웃 구성 요소를 작성하고 loadChildren을 사용하여 내부의 해당 모듈과 구성 요소를로드합니다.각도 2를 추가 후행 나는 두 개의 매장이있는 응용 프로그램 구성 요소가

<app-main-menu></app-main-menu> 
<h1> 
    {{title}} 
</h1> 
<div class="container"> 
    <router-outlet></router-outlet> 
</div> 

문제는 내가 메뉴에 팝업 콘센트의 routerLinks를 이동할 때, 그것은 주요 경로에 대한 후행 슬래시를 포함하고 결과 URL이 작동하지 않습니다. 이 응용 프로그램 구성 요소에 배치하고 경우 그래서 예를 들어이 routerLink : '로컬 호스트/mainroute/(팝업 로그인)'

<a [routerLink]="[{ outlets: { popup : ['login'] } }]">Login</a> 

는 URL '로컬 호스트/mainroute (로그인 팝업)'생성 메뉴 구성 요소에 배치됩니다. 첫 번째 URL이 작동하지만

는 두 번째 URL이 오류가 발생합니다 : 오류 : 어떤 경로를 일치 할 수 없습니다 : 'mainroute'이 다른 두 경우를 취급 왜 이해가 안

. 또한 이해가 안되는데, 심지어 URL이 'localhost/mainroute /'이 작동하더라도 두 번째 생성 된 URL은 후행 슬래시 때문에 발생하지 않습니다.

나를 도와 줄 사람이 있습니까?

+1

당분간 임시 해결책을 찾았습니다. 나는 그것을 가리키는 함수와 링크를 만들었다. 링크는 다음과 같습니다 ** ** Login **이 함수는 이와 같은 구조에서 가져온 라우터를 사용하여 후행 슬래시가없는 URL을 가져옵니다. ** public openLogin() : void { this.router.navigateByUrl (this.router .url + '(팝업 : 로그인)'); } ** – Martinator

답변

1

정확히 같은 동작을 설명하는 issue을 발견했습니다. 분명히 그것은 개발자주의를 끌었으며 올바른 행동이라고 생각합니다. 동일한 라우터 링크 표현식은 사용 된 위치에 따라 다른 결과를 생성 할 수 있습니다.

<a [routerLink]="['../', { outlets: { popup: 'login' } }]"> 

또는 절대 이런 링크 사용 : 절대 링크 일 여기에서 설명하는 경우

<a [routerLink]="['/', { outlets: { popup: 'login' } }]"> 

제안 된 해결책은 다음과 같이 상대의 링크를 사용하는 오른쪽 링크를 주었다.

여전히 동작을 이해하지 못합니다. 그래서 누구든지 그것에 대해 잘 설명해 주시면 자세히 설명해주십시오.