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

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调用的serialize()函数。该服务需要一些数据序列化，因此需要调用DataComponent中的getData()函数并捕获它的返回。这两个组件都是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); 
    } 
}