从共享服务中调用组件的功能

Question

I am trying to set up sibling communication by using a shared service. I'll start by showing you the relevant components:

parent component:

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
}

The shared service:

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

@Injectable()
export class SerializationService {

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

The two sibling components:

//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;
    }
}

You can see that ToolbarComponent calls the serialize() function of SerializationService . The service needs some data to serialize, so it needs to call the getData() function from DataComponent and catch it's return. Both components are children of AppComponent (they are siblings).

How can I do this?

Answer 1

It's not a good idea to call a component's method from a service, maybe it is not even possible. Your component use services, not the opposite.

But you can get data from DataComponent into ToolbarComponent, for example by referencing sibling using template reference variable and using, for example, an input in TollbarComponent to receive the data:

app.component.html:

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

You then pass the data to SerializationService in the serialize method of ToolbarComponent:

export class ToolbarComponent {

    constructor(private serializationService : SerializationService) { }
     @Input() dataToSerialize;

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

Depending on your application's logic, you can also pass the data to ToolbarComponent on some event binding, for example on click event:

app.component.html:

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

// Toolbar component:

export class ToolbarComponent {

    constructor(private serializationService : SerializationService) { }

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