如何从JavaScript函数调用TypeScript中的updateAddress函数？

Great question! When mixing global JavaScript (from your index.html) with Angular component methods (in app-component.ts), you run into context issues because the global function lives in the window scope, while your TypeScript method is tied to an instance of your Angular component. Here are two reliable solutions to fix this:

Solution 1: Expose the Component Method to the Global window Object #

This approach lets your global JS function access the component method by attaching it to the window object. Just make sure to preserve the component's context with bind(this) so this inside updateAddress() refers to the component instance, not the window.

Step 1: Update app-component.ts #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app-component.html',
  styleUrls: ['./app-component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    // Mount the component's updateAddress method to the global window object
    (window as any).updateAddress = this.updateAddress.bind(this);
  }

  updateAddress(): void {
    // Your existing method logic here
    console.log('Address updated successfully from component!');
  }
}

Step 2: Keep Your Existing Global Function #

Your index.html script doesn't need changes—since we've exposed updateAddress to window, the global confirmChanges() can call it directly like you already have:

<script>
function confirmChanges(){
    var optionSelected = confirm('Are you sure?');
    if(optionSelected == true){
        alert('Changes were applied successfully!');
        updateAddress(); // Now this refers to the component's method via window
    } else{
        alert('You discarded the changes!');
    }
}
</script>

Solution 2: Use Angular's Native Event Binding (Recommended) #

For a more "Angular-native" approach, ditch the global function entirely. Move the confirmation logic into your component and use Angular's (click) event binding instead of onclick. This aligns with Angular's component-based architecture and avoids global scope pollution.

Step 1: Update app-component.html #

Replace the onclick attribute with Angular's event binding:

<button type="button" (click)="confirmChanges()">Save Changes</button>

Step 2: Move Logic to app-component.ts #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app-component.html',
  styleUrls: ['./app-component.css']
})
export class AppComponent {
  confirmChanges(): void {
    const optionSelected = confirm('Are you sure?');
    if (optionSelected) {
      alert('Changes were applied successfully!');
      this.updateAddress(); // Directly call the component method with correct context
    } else {
      alert('You discarded the changes!');
    }
  }

  updateAddress(): void {
    // Your existing method logic here
    console.log('Address updated successfully from component!');
  }
}

This is the better long-term solution because it keeps all related logic within your component, makes testing easier, and avoids potential conflicts with global variables.

内容的提问来源于stack exchange，提问作者user9632291