zl程序教程

您现在的位置是:首页 >  后端

当前栏目

Angular.js 页面里的按钮点击事件处理

AngularJS 页面 点击 按钮 事件处理
2023-09-14 09:03:57 时间

假设我有一个Angular页面,上面绘制了一个按钮:

<div class="fd-form__set">
                                    <div class="fd-form__item">
                                        <button (click)="send()" class="fd-button fd-button--action-bar fd-has-float-left">
                                            Send to Back-end
                                        </button>
                                    </div>
                                    <br/><br/>
                                </div>

clipboard1

运行时这个按钮的外观如图:

clipboard2

这个send按钮的实现位于component html对应的ts文件内:

clipboard3

    send() {
        this.waiting = false;

        let data = {
            command: 'hash',
            dateTime: Date.now(),
            originalString: this.stringToSend
        }

        this.broadcaster.broadcast('sendData', data);
    }

运行时点击按钮,断点触发:

clipboard4

这时就可以在Chrome开发者工具里调试了。

clipboard5

SAP Spartacus 里自定义按钮的最佳实践:button标签 + 自定义icon

如此一来,将鼠标放上icon之后,具有hoverable的效果:

而hover到普通的icon上,显示效果是这样的:

更多Jerry的原创文章,尽在:“汪子熙”:

要获取更多Jerry的原创文章,请关注公众号"汪子熙":