如何将值从一个组件传递到服务以在Angular 6中获取第二个组件？

Question

我在第一个组件的ts文件的构造函数中创建Service类对象时，正在将变量数据传递给服务，以便在第二个组件中使用，但在第一个组件中使用，那么我将无法在第一个组件的函数中访问它。如何做到这一点，以便我可以在第二个组件中获取值

我在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);

    })

  }

}

第二个Component.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)
  }

}

Answer 1

使用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)
  }

}

Answer 2

第一部分中的这一行是罪魁祸首。
this.d.changeMessage( step);

由于您在回调中，因此这里没有正确的“此”设置。

将回调函数更改为箭头函数，它将得到解决。

执行以下操作：

从function (e)更改为：

e =>

或者，如果您不介意丑陋的语法： 您可以在回调函数结束时添加.bind(this)。

喜欢：

function (e) {

}.bind(this)