Angular 从共享服务中调用组件的函数

我正试图通过使用共享服务来建立兄弟通信。首先，我将向您展示相关组件：

//Toolbar component: 
import { SerializationService } from '../serialization/serialization.service';

@Component({
  selector: 'toolbar-component',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent {

  constructor(private serializationService : SerializationService) { }

  serialize() {
      this.serializationService.serialize();
  }
}

//Data Component: 
import { SerializationService } from "../serialization/serialization.service";

@Component({
  selector: 'pixi-component',
  templateUrl: './pixi.component.html',
  styleUrls: ['./pixi.component.css'],
})
export class DataComponent {

    private data : String;

    constructor(private operationService: OperationService, 
                private serializationService : SerializationService
    ){}

    getData() : String {
        return this.data;
    }
}

父组件：

import { SerializationService } from './serialization/serialization.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [SerializationService]
})
export class AppComponent implements OnInit {
    //irrelevant body
}

共享服务：

import { Injectable } from '@angular/core';
import { WorkspaceSerializer } from './WorkspaceSerializer';

@Injectable()
export class SerializationService {

    serialize() {
         //NEED TO CALL getData() IN DataComponent!!!
    }
}

两个同级组件：

//Toolbar component: 
import { SerializationService } from '../serialization/serialization.service';

@Component({
  selector: 'toolbar-component',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.css']
})
export class ToolbarComponent {

  constructor(private serializationService : SerializationService) { }

  serialize() {
      this.serializationService.serialize();
  }
}

//Data Component: 
import { SerializationService } from "../serialization/serialization.service";

@Component({
  selector: 'pixi-component',
  templateUrl: './pixi.component.html',
  styleUrls: ['./pixi.component.css'],
})
export class DataComponent {

    private data : String;

    constructor(private operationService: OperationService, 
                private serializationService : SerializationService
    ){}

    getData() : String {
        return this.data;
    }
}

您可以看到

ToolbarComponent

调用

SerializationService

的

serialization（）函数。该服务需要一些数据进行序列化，因此它需要从
DataComponent
调用
getData（）
函数并捕获它的返回。这两个组件都是AppComponent的子组件（它们是同级）

如何才能做到这一点？
从服务调用组件的方法不是一个好主意，甚至可能根本不可能。您的组件使用服务，而不是相反

但您可以将数据从DataComponent获取到ToolbarComponent，例如，通过使用模板引用变量引用同级，并使用TollbarComponent中的输入来接收数据：

app.component.html：

<toolbar-component [dataToSerialize] = "#dataComponent.getData()"></toolbar-component>
<pixi-component #dataComponent></pixi-component>

<toolbar-component (click)="serialize(dataComponent.getData())"></toolbar-component>
<pixi-component #dataComponent></pixi-component>

根据应用程序的逻辑，您还可以通过某些事件绑定将数据传递给ToolbarComponent，例如单击事件：

app.component.html：

<toolbar-component [dataToSerialize] = "#dataComponent.getData()"></toolbar-component>
<pixi-component #dataComponent></pixi-component>

<toolbar-component (click)="serialize(dataComponent.getData())"></toolbar-component>
<pixi-component #dataComponent></pixi-component>

我非常喜欢这一点，尤其是行
（单击）=“serialize（dataComponent.getData（））”
以按需获取所需的数据。非常感谢。