Как вызвать метод машинописи при нажатии кнопки, который присутствует в другом файле .ts?

Question

У меня есть два файла .ts (editor.ts и editor_settings.ts), соответствующие editor.ts У меня есть редактор Creater. html файл. Теперь, что я пытаюсь вызвать функцию внутри editor_settings.ts при нажатии кнопки в редакторе. html.

editor.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>

Теперь, при нажатии кнопки в редакторе. 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

Другой подход действителен, если ваш редактор находится внутри editorSetting

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

Использовать Host в конструкторе

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