Как передать значение из одного компонента в службу для извлечения во втором компоненте в Angular 6? - PullRequest
Новая
       28

Как передать значение из одного компонента в службу для извлечения во втором компоненте в Angular 6?

0 голосов
/ 24 октября 2018

Я передаю переменные данные в службу для использования во втором компоненте, но в первом компоненте, когда я создаю объект класса Service в создателе файла TS первого компонента, тогда я не могу получить к нему доступ в функциях первого компонента.Как сделать так, чтобы я мог получить значение во втором компоненте

Я получаю ошибку в FirstComponent как 

ERROR TypeError: Cannot read property 'changeMessage' of undefined

Класс обслуживания 

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


@Injectable({
  providedIn: 'root'
})
export class ProgressService {

  private messageSource = new BehaviorSubject('0');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }

}

FirstComponent.ts

import { Component, OnInit } from '@angular/core';
import { ProgressService } from 'src/app/services/progress.service';
declare var $:any;

@Component({
  selector: 'app-initial-setup',
  templateUrl: './initial-setup.component.html',
  styleUrls: ['./initial-setup.component.css']
})
export class InitialSetupComponent implements OnInit {

  constructor(private d: ProgressService) { }

  ngOnInit() {


    $('a').on('shown.bs.tab', function (e) {

      //update progress
       var step = $(e.target).data('step');
      var percent = (parseInt( step) / 10) * 100;

      $('.progress-bar').css({width: percent + '%'});
      $('.progress-bar').text("Step" +  step + " of 10");
      //e.relatedTarget // previous tab 


    this.d.changeMessage( step);

    })

  }

}

Второй компонент.ts 

import { Component, OnInit } from '@angular/core';
import { ProgressService } from 'src/app/services/progress.service';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  message:string;


  constructor(public data: ProgressService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Эта строка в первом компоненте является виновником.
this.d.changeMessage( step);

Здесь у вас нет правильной настройки "this", поскольку вы находитесь внутри обратного вызова.

Изменитьваша функция обратного вызова для функции стрелка, и она должна быть решена.

Сделайте это:

из function (e) измените его на:

e =>

В качестве альтернативы, если вы не возражаете против уродливого синтаксиса: вы можете добавить .bind(this) после завершения функции обратного вызова.

например: 

function (e) {

}.bind(this)
0 голосов
/ 24 октября 2018

Используйте ngAfetViewInit вместо ngOnInit крюк жизненного цикла: 

import { Component, AfterViewInit} from '@angular/core';
import { ProgressService } from 'src/app/services/progress.service';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements AfterViewInit{

  message:string;

  constructor(public data: ProgressService) { }

  ngAfterViewInit() {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}
...