2017-01-13 9 views
4

도메인을 기반으로 사이트 복사본을 가져 오는 응용 프로그램을 작성 중입니다. 한 가지 예외가있는 응용 프로그램이 있습니다. 아래처럼 app.component 템플릿에서 애플리케이션의 탐색 바 및 바닥 글을 정의하고 있습니다. Angular 2에서 app 구성 요소를 해결하는 올바른 방법

<navigation></navigation> 
    <router-outlet></router-outlet> 
    <appFooter></appFooter> 

그리고 appFooter에 대한 템플릿 및 탐색 내가 정말하고 싶은 무엇

<p>{{copyService.copy?.somevalue}}</p> 

가 해결 및 ActivatedRoute의 데이터 속성을 사용하는 것입니다 아래처럼 안전 navifation 연산자를 사용하여 데이터를 해결하고 내부

이 같은 것을 할 수

var copy = this.route.snapshot.data['copy']; 

애플 리케이션 구성 요소에. 그런 다음 입력 변수를 통해 데이터를 바닥 글 및 탐색에 전달합니다. 나는이 완료 가야하는 사람이 가장 좋은 방법에 대한 아이디어가있는 경우

{ path: '', redirectTo: '/home', pathMatch: 'full'}, 

아래처럼 내 집의 구성 요소로 리디렉션하고 때

불행하게도 나는 응용 프로그램 구성 요소에 대한 해결에 대한 갈 것이라고 어떻게 확신하지 않는다 나는 그것을 고맙게 여길 것이다. 미리 감사드립니다.

내가 제공 한 코드는 예제 코드 일 뿐이며 실제 코드베이스가 아니라 현재 사용하고있는 문제를 설명하려고 한 것임을 알아 두십시오.

답변

6

내가 처리 할 수 ​​있었던 방법은 app.component 위에 다른 구성 요소 레이어를 추가하는 것이 었습니다.

{ path: '', redirectTo: '/home', pathMatch: 'full' }, 
{ path: '', 
    component: BaseComponent, 
    resolve: { 
    yourContent: contentResolver 
    }, 
    children: [ 
    { path: 'home'... } 
    ] 
} 

그런 다음 이동 :

<navigation></navigation> 
<router-outlet></router-outlet> 
<appFooter></appFooter> 

당신의 base.html 속으로이 BaseComponent에서 정의하는 app.html

결의에서 내의 모든 구성 요소에 사용할 수있게됩니다 (그리고 모든 하위 경로에) .

희망은 당신을 당신이 찾고있는 것에 더 가깝게 만듭니다.

+0

감사합니다. – TyAnthoney

+0

여러 모듈을 사용하면 어떻게 할 수 있습니까? – DauleDK