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

Question

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

父组件：

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的serialize()函数。服务需要一些数据来序列化，因此它需要从getData()调用DataComponent函数并捕获它的返回。这两个组件都是AppComponent的子组件(它们是兄弟姐妹)。

我该怎么做？

Answer 1

从服务中调用组件的方法不是一个好主意，甚至可能是不可能的。您的组件使用服务，而不是相反。

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

app.component.html：

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

然后，在SerializationService的序列化方法中将数据传递给ToolbarComponent：

export class ToolbarComponent {

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

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

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

app.component.html：

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

//工具栏部分：

export class ToolbarComponent {

    constructor(private serializationService : SerializationService) { }

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