首页 文章

由具有Angular 5的组件执行函数

提问于
浏览 次
-1

我想创建一个“动作”组件，该组件应该用于链接“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);
    }
}

我这样称呼：

<action [promise]="accept" [loadingLabel]="'Accepting'">Confirm</action>

它适用于简单的回调函数（因此在本例中为 accept ） . 但是，当函数有点复杂时，例如，使用注入的Angular服务，它不起作用 .

在此示例中，accept函数如下所示：

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

其中 _modalService 注入组件中 . 当我执行此操作时，控制台会说 this._modalService 为null或未定义 .

需要很简单，但我无法找到实现它的方法 .

angular

1 回答

  • 0

    您可以通过在项目中安装ngx-loading来显示加载动画，并在app.module.ts文件中从'ngx-loading'导入并在导入数组中添加LoadingModule .

    然后在组件的html中使用正在执行操作的链接，将此html：

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

    并在调用Web服务集之前在TypeScript文件中设置 loadingStuff = true;

    并订阅该呼叫，当它返回时设置 loadingStuff = false;

    在组件类的顶部，您可能希望将变量声明为false： loadingStuff = false;

    ....

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

相关问题