2016-08-17 6 views
2

다양한 angular2 구성 요소와 가져온 모듈간에 액세스 할 수있는 응용 프로그램 가변 변수를 만들고 싶습니다.Angular2 (RC5)의 응용 프로그램 가변 변수

나는 app.module에 종속성 주입을 조사해 보았고 그 속성을 가진 클래스를 설정할 수 있다고 생각했습니다. 그러나 새로운 각도 -RC5 버전을 사용하면 내가하고 싶은 일이 지나치게 복잡해 보입니다.

또는 @Inputs 및 @Outputs를 사용하여 데이터를 계단식으로 배열하고 변경 사항을 구독하는 방법을 생각했지만 모듈 간에는 가능하지 않은 것으로 보입니다.

이 작업을 수행하는 가장 쉬운 방법에 대한 제안에 대해 정말 감사하게 생각합니다.

내 특정 응용 프로그램의 측면에서, 하나만 제외하고 모든 경로에 표시하려는 navbar 구성 요소가 있습니다. 그래서 내 app.component 템플릿에 * NgIf 조건이 있습니다. 그런 다음 모든 하위 모듈 및 구성 요소에 navbar 구성 요소를 포함하지 않고도 다양한 하위 구성 요소에서 navbar를 표시하도록 변경할 수 있기를 원합니다. 구성 요소 까다로운 모듈 사이에 공유되는됩니다. 내 경로의 일부가 모듈에서 가져옵니다. 이것은 일반적으로 공유 서비스를 사용하여 수행됩니다

답변

2

당신은 공유 서비스를 만들 수 있습니다. 그런

뭔가 :

import { Injectable } from '@angular/core'; 

@Injectable() 
export class GenericService { 
    data:any = {}; 
} 

다음이 app.module에 추가합니다.

이후에는 구성 요소에 삽입하고 모든 구성 요소에서 액세스 할 수있는 데이터를 추가 할 수 있습니다.

+0

가져온 하위 모듈에서 액세스 할 수 있습니까? app.module에? –

+0

또한'''export class AppComponent { showHeader : boolean = false; 생성자 (개인 uiService : UiService) { this.showHeader = uiService.navOn; } }'''값을 변경하면 showHeader가 업데이트되지 않습니까? –

+0

그렇지 않습니다. 이 https://plnkr.co/edit/Ii4t7o6NEUdg3uvxvdUn?p=preview를보십시오 당신은 두 가지 해결책을 가지고 있습니다 :'{{name}}'을'{{gs.data.name}}'(plunker에서 시도하십시오)로 변경하거나 귀하의 서비스를 관찰하고 "구독"하십시오 (웹에서 쉽게 예제를 찾을 수 있습니다) – Maxouhell

관련 문제