angular 调用js方法

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

@Component({
  selector: 'app-root',
  template: `<button (click)="callJavaScriptMethod()">Click me</button>`
})
export class AppComponent {
  callJavaScriptMethod() {
    alert('Hello from JavaScript method!');
  }
}

// external.js
function externalMethod() {
  alert('Hello from external JavaScript method!');
}

// app.component.ts
import { Component, OnInit } from '@angular/core';

declare const externalMethod: any; // 声明外部方法

@Component({
  selector: 'app-root',
  template: `<button (click)="callExternalMethod()">Call External Method</button>`
})
export class AppComponent implements OnInit {
  ngOnInit() {
    // 引入外部脚本
    const script = document.createElement('script');
    script.src = 'path/to/external.js';
    document.body.appendChild(script);
  }

  callExternalMethod() {
    externalMethod();
  }
}

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

@Injectable({
  providedIn: 'root'
})
export class MyServiceService {
  myJavaScriptMethod() {
    alert('Hello from service method!');
  }
}

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

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

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

declare const externalMethod: any;