如何在不同的.ts文件中单击按钮时调用typescript方法

Question

我有两个.ts文件(editor.ts和editor_settings.ts(，对应于editor.ts.我有creater editor.html文件。现在，我试图调用editor_settings.ts中的函数，点击editor.html中的按钮。

编辑.ts

import { EditorSetting } from '../app/editorSetting.component';
export class PadComponent implements OnInit, OnDestroy { ---- }
constructor(
private component: EditorSetting
) { }
submit() {
let userCode = this.component.editor.getValue();
console.log('Inside pad.componet.ts');
console.log(userCode);
}

editor.html

<button id="submit" type="button" class="btn btn-sm btn-run" (click)="submit()" [disabled]="loading" 
style="background: #FF473A">
<i class="fa fa-play" aria-hidden="true"></i>
<span *ngIf="loading">Running</span>
<span else> Run </span>
</button>

现在，点击editor.html中的按钮，我想调用editor_settings.ts.中的函数

editor_settings.ts

export class EditorComponent implements OnInit, OnDestroy, OnChanges {--}

我面临以下错误：

inline template:0:0 caused by: No provider for EditorComponent!

Answer 1

要通信两个互不相关的组件，可以使用服务。

@Injectable({
providedIn: 'root',
})
export class YourService {
private yourVariable: Subject<any> = new Subject<any>();

public listenYourVariable() {
return this.yourVariable.asObservable();
}

public yourVariableObserver(value ?: type) {
this.yourVariable.next(value);
}

您可以将此服务导入到您想要使用的组件中。

import{ YourService } from ...

在编辑组件中：

submit(){
this.yourService.yourVariableObserver();
}

在Editor_setting.ts 中时

ngOnInit() {
this.sub=this.yourService.listenYourVariable().subscribe(
variable => {
this.callyourFunction();
}
)
}

不要忘记取消订阅以防止内存泄漏

ngOnDestroy() {
this.sub.unsubscribe()
}

Answer 2

如果您的编辑器在编辑器内，则另一种方法有效设置

<editor-setting>
<editor></editor>
</editor-setting>

在构造函数中使用主机

constructor(@Optional @Host() private component: EditorSetting) { }