Question

我正在尝试单击HTML页面上的按钮并让它调用TypeScript函数。但函数getToken()永远不会被调用。我已经通过从构造函数中调用它来测试该函数，并且该函数运行正常。浏览器的控制台中不会显示任何错误或警告。

app.module.ts（包含我想从HTML调用的getToken方法）

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { RequestOptions, Request, RequestMethod } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@NgModule({
    imports:      [ BrowserModule, HttpModule ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})


@Injectable()
export class AppModule {

    constructor(private http: Http) {}

    private _token: string;

    public getToken() {
        let url = "https://my.domain.net/oauth/token";

        let urlSearchParams = new URLSearchParams();
        urlSearchParams.append('grant_type', 'password');
        urlSearchParams.append('username', 'myUserName');
        urlSearchParams.append('password', 'myPassword');
        let body = urlSearchParams.toString()

        this.http.post(url, body)
            .map(res => res.json())
            .subscribe(
            data => { this._token = data.access_token; alert("TOKEN: " + this._token); console.log(data); },
            err => console.log(err),
            () => console.log('Fetching complete for Server Metrics')
        );
    }
}

如何在HTML文件中调用TypeScript的函数：

<button (click)="getToken()">Get Token</button>

Answer 1

嗯......您的代码存在一些基本问题。首先，我建议你看一下https://angular.io上写的指南。

您正在使AppModule成为@Injectable。这是错误的..
你的AppModule
您可以假设您可以从任何模板中执行类中的方法。您只能通过组件template内的模板或templateUrl内的模板执行此操作。

要使其适用，您应移除@Injectable()，并将逻辑移至AppComponent。鉴于没有其他错误

HTML调用TypeScript函数不执行

1 个答案: