從共享服務中調用組件的功能

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