Angular2: отправка данных из компонента в компонент через службу

я получаю данные из компонента и пытаюсь отправить их другому компоненту через службу

Компонент1 (Пуск): переключатель Просмотр

                <md-radio-button
                    *ngIf="item.id===1"
                    value="{{item.value}}"
                    class="{{item.class}}"
                    checked="{{item.checked}}"
                    (click)="onSelectType1(item)"> //here i'm catching the value
                {{item.label}}
            </md-radio-button>

код ТС

public  onSelectType1(selected:any){
        this.formeService.type1Change(selected.nb)
}

СЛУЖБА:

@Injectable()
export class FormeService{
public type1S : any;

public  type1Change(selected):any

{

    this.type1S=selected;  //here i'm catching it into the service

 }

Компонент 2 : (Конец) : Простой вид

код ТС

export class ContentComponent{

constructor(public BackService : BackgroundService ,
                public formeService: FormeService)
    {
        console.log(this.formeService.type1S) 



////// that diplays me in the console that it's undefined !!!!!!!!!!!!!!!!! 


The probleme is HERE : how may i access to the value of my variable in this part 



}

!!!!!!!! и в то же время в представлении он отображает мне значение:

{{formeService.type1S}}  // this works normally

кто может сказать мне, как я могу отобразить значение моих данных в "коде конечного компонента ts" ?????


typescript angular angular2-directives angular2-routing angular2-services
person firasKoubaa    schedule 04.04.2016    source источник
comment
Если вы не думаете, что это дубликат, добавьте комментарий, чтобы его снова открыли.   -  person Günter Zöchbauer    schedule 04.04.2016
comment
проблема в том, как повторно использовать значение моих данных в коде ts не в представлении, с помощью субъектов можно передавать данные и отображать их в представлениях, но здесь контекст заключается в том, как отображать их из части кода   -  person firasKoubaa    schedule 04.04.2016
comment
Часть с .subscribe( предназначена для получения уведомлений об изменениях значений в службе в TypeScript.   -  person Günter Zöchbauer    schedule 04.04.2016
comment
this.formeService.type1S.subscribe( type =›this.testVariable= type); console.log(this.testVariable) =======> Не определено   -  person firasKoubaa    schedule 04.04.2016
comment
в то же время: в представлении {{testVariable}} работает отлично   -  person firasKoubaa    schedule 04.04.2016
comment
{{testVariable}} неоднократно проверяется Angular, изменилось ли значение, а затем обновляет представление. В ТС вам нужно позаботиться об этом самостоятельно. Когда вы подписываетесь после того, как было отправлено последнее значение, подписчик не будет получать никаких обновлений.   -  person Günter Zöchbauer    schedule 04.04.2016
comment
@GünterZöchbauer, это моя проблема, сэр, какая лучшая альтернатива или, по крайней мере, как я могу с этим справиться, мне нужно использовать значение в части ts моего кода   -  person firasKoubaa    schedule 04.04.2016
comment
angular.io/docs/ts/latest/ кулинарная книга/   -  person Eric Martinez    schedule 04.04.2016

Ответы (1)


arrow_upward
2
arrow_downward

Полный пример Plunker

import {Injectable, Component, Directive} from 'angular2/core'
import { BehaviorSubject } from 'rxjs/subject/BehaviorSubject';
import 'rxjs/Rx';

@Injectable()
export class FormeService {
  public type1S$:BehaviorSubject<number> = new BehaviorSubject<number>(null);

  // when new values are set notify subscribers
  set type1S(value:number) {
    this.type1S$.next(value);  
  }
}

@Component({
  selector: 'content-comp',
  template: `
<div>{{value}}</div>
`})
export class ContentComponent {
  value:number;

  constructor(public formeService: FormeService) {
    // subscribe to updates
    this.formeService.type1S$.subscribe(val => {
      this.value = val;
    });
  }
} 

@Component({
  selector: 'other-comp',
  template: `
<button (click)="clickHandler()">count</button>
`})
export class OtherComponent {
  counter:number = 0;
  constructor(private formeService: FormeService) {}

  // set new values      
  clickHandler() {
    this.formeService.type1S = this.counter++;
  }
} 

@Component({
  selector: 'my-app',
  providers: [FormeService],
  directives: [ContentComponent, OtherComponent]
  template: `
  <h2>Hello {{name}}</h2>
  <content-comp></content-comp>
  <other-comp></other-comp>
`
})
export class App {

}
person Günter Zöchbauer    schedule 04.04.2016
comment
Большое спасибо за ответ и за ценную помощь, но я не знаю, сохраняется ли проблема, потому что в этом плункере, если я хочу отобразить значение значения внутри компонента содержимого, он будет отображать ноль (первое значение) даже после 2-3 кликов - person firasKoubaa; 05.04.2016
comment
console.log(это.значение); // null ВСЕГДА (ВНУТРИ СОДЕРЖИМОГО КОМПОНЕНТА) - person firasKoubaa; 05.04.2016
comment
Вы проверяли Plunker (ссылка вверху моего ответа)? Компонент содержимого показывает обновленное значение. - person Günter Zöchbauer; 05.04.2016
comment
да, я сделал это, просто поместите console.log в нижнюю часть контента и проверьте консоль навигатора, она будет отображать ноль, даже если она отлично работает в представлении шаблона. - person firasKoubaa; 05.04.2016
comment
Не могли бы вы обновить мой плункер, чтобы показать, что вы сделали? - person Günter Zöchbauer; 05.04.2016