angular2를 사용하여 서비스에서 구성 요소의 변수 변경 사항 업데이트

angular2를 사용하여 서비스에서 구성 요소의 변수 변경 사항 업데이트

---

내 앱에는 이름을 보유한 NameService가 있습니다.

이 서비스를 참조하는 App, Navbar 및 TheContent의 두 가지 하위 구성 요소가 있습니다. 서비스에서 이름이 변경 될 때마다 다른 구성 요소 모두에서 업데이트되기를 원합니다. 어떻게 할 수 있습니까?

import {Component, Injectable} from 'angular2/core'

// Name Service

@Injectable()
class NameService {
  name: any;
  constructor() {
    this.name = "Jack";
  }
  change(){
    this.name = "Jane";
  }
}

// The navbar
@Component({
  selector: 'navbar',
  template: '<div>This is the navbar, user name is {{name}}.</div>'
})
export class Navbar {
  name: any;
  constructor(nameService: NameService) {
    this.name = nameService.name;
  }
}

// The content area
@Component({
  selector: 'thecontent',
  template: '<div>This is the content area. Hello user {{name}}. <button (click)=changeMyName()>Change the name</button></div>'
})
export class TheContent {

  name: any;

  constructor(public nameService: NameService) {
    this.name = nameService.name;
  }
  changeMyName() {
       this.nameService.change();
     console.log(this.nameService.name);
  }
}


@Component({
  selector: 'app',
  providers: [NameService],
  directives: [TheContent, Navbar],
  template: '<navbar></navbar><thecontent></thecontent>'
})
export class App {
  constructor(public nameService: NameService) {
  }
}

---

서비스에 이벤트를 제공하고 구성 요소에서 구독합니다.

@Injectable()
class NameService {
  name: any;
  // EventEmitter should not be used this way - only for `@Output()`s
  //nameChange: EventEmitter<string> = new EventEmitter<string>();
  nameChange: Subject<string> = new Subject<string>();
  constructor() {
    this.name = "Jack";
  }
  change(){
    this.name = 'Jane';
    this.nameChange.next(this.name);
  }
}

export class SomeComponent { 
  constructor(private nameService: NameService) {
    this.name = nameService.name;
    this._subscription = nameService.nameChange.subscribe((value) => { 
      this.name = value; 
    });
  }

  ngOnDestroy() {
   //prevent memory leak when component destroyed
    this._subscription.unsubscribe();
  }
}

angular.io 참조
-구성 요소 상호 작용-부모와 자녀는 서비스를 통해 통신합니다.

---

이후 name에이 NameService원시적 형은, 당신은 서비스와 구성 요소의 여러 인스턴스를 얻을 수 있습니다. name에서 변경 NameService하면 구성 요소 속성에 여전히 초기 값이 있고 바인딩이 예상대로 작동하지 않습니다.

You should apply the angular1 "dot rule" here and bind to a reference type. Change NameService to store an object that contains the name.

export interface Info {
   name:string;
}

@Injectable()
class NameService {
  info: Info = { name : "Jack" };
  change(){
    this.info.name = "Jane";
  }
}

You can bind to this object and get updates to the name property automatically.

// The navbar
@Component({
  selector: 'navbar',
  template: '<div>This is the navbar, user name is {{info.name}}.</div>'
})
export class Navbar {
  info: Info;
  constructor(nameService: NameService) {
    this.info = nameService.info;
  }
}

---

I think that the solution provided by Günter is the best one.

That said, you must be aware that Angular2 services are singleton that take place into a tree of injectors. This means that:

• if you define your service at the application level (within the second parameter of the bootstrap method), the instance can be share by all elements (components and service).
• if you define your service at the component level (within the providers attribute), the instance will be specific to the component and its sub components.

For more details of such aspect, you can have a look at the "Hierarchical Dependency Injection" doc: https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

Hope it helps you, Thierry

참고URL : https://stackoverflow.com/questions/34714462/updating-variable-changes-in-components-from-a-service-with-angular2