Angular2 - 서비스를 사용하여 구성 요소 간에 데이터 공유

Angular2 - 서비스를 사용하여 구성 요소 간에 데이터 공유

Angular2 앱으로 구성 요소 간에 공유하고 싶은 개체가 있습니다.

첫 번째 구성 요소의 소스는 다음과 같습니다.

/* app.component.ts */

// ...imports
import {ConfigService} from './config.service';

@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.html',
    directives: [Grid],
    providers: [ConfigService]
})
export class AppComponent {
    public size: number;
    public square: number;

    constructor(_configService: ConfigService) {
        this.size = 16;
        this.square = Math.sqrt(this.size);

        // Here I call the service to put my data
        _configService.setOption('size', this.size);
        _configService.setOption('square', this.square);
    }
}

두 번째 구성 요소:

/* grid.component.ts */

// ...imports
import {ConfigService} from './config.service';

@Component({
    selector: 'grid',
    templateUrl: 'app/templates/grid.html',
    providers: [ConfigService]
})
export class Grid {
    public config;
    public header = [];

    constructor(_configService: ConfigService) {
        // issue is here, the _configService.getConfig() get an empty object 
        // but I had filled it just before
        this.config = _configService.getConfig();
    }
  }

그리고 마지막으로 저의 작은 서비스인 ConfigService:

/* config.service.ts */

import {Injectable} from 'angular2/core';

@Injectable()
export class ConfigService {

    private config = {};

    setOption(option, value) {
        this.config[option] = value;
    }

    getConfig() {
        return this.config;
    }
}

내 데이터는 grid.component.ts에서 공유되지 않습니다._configService.getConfig()line은 빈 개체를 반환하지만 app.component.ts의 직전에 채워집니다.

문서와 자습서를 읽었지만 아무 것도 소용이 없었습니다.

제가 무엇을 빠뜨리고 있나요?

감사해요.

해결된

제 문제는 ConfigService를 두 번 주입했다는 것입니다.응용프로그램의 부트스트랩과 사용 중인 파일에 있습니다.

제거했습니다.providers설정 및 작동했습니다!

두 구성 요소 내에서 정의합니다.그래서 서비스가 공유되지 않습니다.한 가지 예가 있습니다.AppComponent구성 요소 및 다른 구성 요소Grid요소.

@Component({
  selector: 'my-app',
  templateUrl: 'app/templates/app.html',
  directives: [Grid],
  providers: [ConfigService]
})
export class AppComponent {
  (...)
}

빠른 해결책은 다음을 제거하는 것입니다.providers그리드 구성 요소의 속성...이렇게 하면 서비스 인스턴스가AppComponent및 하위 구성 요소.

또 다른 해결책은 해당 제공자를 등록하는 것입니다.bootstrap기능.이 경우 인스턴스는 전체 응용프로그램에서 공유됩니다.

bootstrap(AppComponent, [ ConfigService ]);

이렇게 해야 하는 이유를 이해하려면 Angular2의 "계층형 인젝터" 기능을 알아야 합니다.다음 링크가 유용할 수 있습니다.

• 각도 2(베타)에서 한 서비스를 다른 서비스에 주입하는 가장 좋은 방법은 무엇입니까?
• https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

최신 버전의 Angular의 경우 서비스를 공유하려면 부트스트랩 기능에 추가할 수 없습니다.일반 서비스와 마찬가지로 NgModule 공급자 목록에 추가하기만 하면 기본 동작은 싱글톤이 됩니다.

부트스트랩(AppComponent);

@NgModule({
    declarations: [
        ....
    ],
    imports: [
       ....     
    ],
    providers: [
        ConfigService,
....

추가 안 함ConfigService로.providers사용자 구성 요소의.그러면 모든 구성 요소에 대해 새 인스턴스가 생성됩니다.에 추가providers공통 상위 구성 요소의.루트 구성 요소에 추가하는 경우 또는bootstrap(App, [ConfigService])전체 응용프로그램이 단일 인스턴스를 공유합니다.

언급URL : https://stackoverflow.com/questions/35273106/angular2-share-data-between-components-using-services