共有サービス内のコンポーネントの関数呼び出し

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!!! 
    } 
} 

2つの兄弟コンポーネント：

//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は、の機能をと呼びます。このサービスではシリアル化するデータが必要なので、getData()関数をから呼び出して返す必要があります。どちらのコンポーネントもAppComponentの子（兄弟です）です。

どうすればいいですか？

Answer 1

サービスからコンポーネントのメソッドを呼び出すことはお勧めできません。多分それは可能ではないかもしれません。あなたのコンポーネントはサービスを利用します。

しかし、あなたは、例えば、テンプレートの参照変数を使用して兄弟と使用して参照することにより、例えば、ToolbarComponentにDataComponentからのデータを受信するTollbarComponentで入力したデータを取得することができます。

app.component.html：

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

あなたはその後、ToolbarComponentのSerializeメソッドでSerializationServiceにデータを渡す：

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