从共享服务中调用组件的功能
Call function of a component from within a shared service
我正在尝试使用共享服务建立同级通信。我将从向您展示相关组件开始:
parent分量:
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()
函数。该服务需要一些数据来序列化,因此它需要从 DataComponent
调用 getData()
函数并捕获它的 return。两个组件都是 AppComponent
的 children(他们是兄弟姐妹)。
我该怎么做?
从服务调用组件的方法不是一个好主意,甚至不可能。您的组件使用服务,而不是相反。
但是您可以将数据从 DataComponent 获取到 ToolbarComponent,例如通过使用模板引用变量引用同级并使用例如 TollbarComponent 中的输入来接收数据:
app.component.html:
<toolbar-component [dataToSerialize] = "#dataComponent.getData()"></toolbar-component>
<pixi-component #dataComponent></pixi-component>
然后在 ToolbarComponent 的序列化方法中将数据传递给 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);
}
}
我正在尝试使用共享服务建立同级通信。我将从向您展示相关组件开始:
parent分量:
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()
函数。该服务需要一些数据来序列化,因此它需要从 DataComponent
调用 getData()
函数并捕获它的 return。两个组件都是 AppComponent
的 children(他们是兄弟姐妹)。
我该怎么做?
从服务调用组件的方法不是一个好主意,甚至不可能。您的组件使用服务,而不是相反。
但是您可以将数据从 DataComponent 获取到 ToolbarComponent,例如通过使用模板引用变量引用同级并使用例如 TollbarComponent 中的输入来接收数据:
app.component.html:
<toolbar-component [dataToSerialize] = "#dataComponent.getData()"></toolbar-component>
<pixi-component #dataComponent></pixi-component>
然后在 ToolbarComponent 的序列化方法中将数据传递给 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);
}
}