Angular 使用角度为5的组件执行函数

我想创建一个“action”组件，它应该作为链接“a”元素。但是，我想知道单击组件时执行的函数何时完成。基本上，目标是在执行操作时显示消息

我刚刚制作了一个简单的组件：

export class ActionComponent {

    @Input()
    public loadingLabel: string;

    @Input()
    public promise: () => Promise<void>;

    public running: boolean = false;

    public run(): void {
        this.running = true;

        this.promise().then(() => this.running = false);
    }
}

其中

\u modalService

被注入组件中。当我执行此操作时，控制台显示

this.\u modalService

为null或未定义

---

需求非常简单，但我无法找到实现它的方法。

您可以通过将ngx加载安装到项目中，并在app.module.ts文件中从“ngx加载”导入{LoadingModule}和在导入数组中添加加载模块来显示加载动画

然后，在组件的html中以及执行操作的链接中，放置以下html：

<ngx-loading [show]="loadingStuff"></ngx-loading>

---

我不确定我是否遵循了您尝试的操作？我想创建一个显示链接的组件。单击链接时，将显示一个加载微调器，并显示一条消息，直到执行的功能完成。其思想是，该函数正在调用一个web服务，因此我想在执行期间显示一个加载指示器，我不想为该类型的每个链接实现此逻辑。是否有任何理由通过@Input绑定该服务？服务应该通过DI注入构造函数。你在说什么？没有通过输入传递服务。promise只是一个返回承诺的函数。

public async accept(): Promise<void> {
    this._modalService.showModal({
        ...
    });
}

<ngx-loading [show]="loadingStuff"></ngx-loading>

linkClicked() {
    this.loadingStuff = true;
    myService.getSomethingFromDatabase().subscribe(data => {
      //do something with your data
       this.loadingStuff = false;
     })
}