从外部调用angular组件函数

// my-service.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  doSomething() {
    console.log('Doing something...');
  }
}

// my-component.component.ts
import { Component } from '@angular/core';
import { MyService } from './my-service.service';

@Component({
  selector: 'app-my-component',
  template: `<button (click)="callServiceMethod()">Call Service Method</button>`
})
export class MyComponent {
  constructor(private myService: MyService) {}

  callServiceMethod() {
    this.myService.doSomething();
  }
}

<!-- parent.component.html -->
<app-child (customEvent)="handleCustomEvent()"></app-child>

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  handleCustomEvent() {
    console.log('Custom event handled in parent component.');
  }
}

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="emitCustomEvent()">Emit Custom Event</button>`
})
export class ChildComponent {
  @Output() customEvent = new EventEmitter<void>();

  emitCustomEvent() {
    this.customEvent.emit();
  }
}