在 Angular 4 中单击按钮时执行自定义 Javascript 函数

Question

我是 Angular 4 的初学者，在 Angular 4 中编写登录组件。单击“忘记密码”时，我想翻转页面上的控件以显示“重置密码”元素。我创建了一个名为 rotateCard(this) 的 javascript 函数，我想在单击按钮时调用它。它在 html 中内联 javascript。我在 component.html 中添加了 html。下面是代码。

但它给出错误 "ReferenceError: rotateCard is not defined"

<form (ngSubmit)="doLoginUser()" #login="ngForm" >

    <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card-container manual-flip">
                <div class="card">
                    <div class="front">
                        <div class="content">
                            <div class="main">
                                <img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" />
                                <form>
                                    <div class="form-group">
                                        <input type="text" class="form-control crm-field" placeholder="Email"
                                        id="inputEmail" name="username" ngControl="username" required
                                        autofocus [(ngModel)]="username">                                        
                                    </div>                                   
                                    <div class="form-group">
                                        <input type="password" class="form-control crm-field" name="password" placeholder="Password"
                                        id="inputPassword" ngControl="password" required [(ngModel)]="password">
                                    </div>                                   
                                    <button type="button" class="btn btn-primary btn-block orange-btn">LOGIN</button>
                                </form>
                                <button class="btn btn-simple login-link" onClick="rotateCard(this)">
                                    Forgot Password
                                </button>
                            </div>
                        </div>
                    </div> <!-- end login -->
                    <div class="back">
                        <div class="content">
                            <div class="main">
                                <img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" />
                                <p class="title">Forgot Password</p>
                                <form>
                                    <div class="form-group">
                                        <input type="text" class="form-control crm-field" name="email" placeholder="Email">
                                    </div>
                                    <button type="button" class="btn btn-primary btn-block orange-btn">RESET PASSWORD</button>
                                </form>
                                <button class="btn btn-simple login-link" onClick="rotateCard(this)">
                                    Login
                                </button>
                            </div>
                        </div>
                    </div> <!-- end forgot password -->
                </div> <!-- end card -->
            </div> <!-- end card-container -->
        </div> <!-- end col md 5 -->
    </div> <!-- end row -->
    <div class="space-200"></div>
    </div>

</form>

<script src="../../../../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../../../../js/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function rotateCard(btn){
        var $card = $(btn).closest('.card-container');
        console.log($card);
        if($card.hasClass('hover')){
            $card.removeClass('hover');
        } else {
            $card.addClass('hover');
        }
    }
</script>

Answer 1

如果您想在有人点击元素时执行功能，您可以将 (click) 侦听器添加到您的元素。

像这样：

<button (click)="yourFunction()">Send</button>

然后在你的组件中添加函数：

yourFunction() {
    //your logic 
}

希望对你有所帮助。

给官方文档点赞： https://angular.io/guide/user-input

Answer 2

为什么不把它放在 component.ts 文件中？ .. 还记得在 Angular 4 中你可以设置 css animation directly from Component.ts (https://angular.io/guide/animations) ..

所以例如在你的 component.html .. 是这样的：

<button class="btn btn-simple login-link" (click)="rotateCard()">
                                    Login
                                </button>

那么在你的Component.ts文件中：

在header section (near import )..

declare var $:any;

然后在你的 ComponentClass 之后

rotateCard(){
        var $card = $("#USE ID NOT THIS FOR SELECTOR").closest('.card-container');
        console.log($card);
        if($card.hasClass('hover')){
            $card.removeClass('hover');
        } else {
            $card.addClass('hover');
        }
    }

希望对您有所帮助！！

Answer 3

It is inline javascript in html

你真的不应该这样做。查看您的函数，将其移动到组件定义中而不是将其放在 HTML.

中看起来很简单

虽然没有看到组件，但我帮不上什么忙

Answer 4

我可以通过 3 个步骤解决这个问题。

我将绑定更改为 (click)="rotateCard(this)。
添加了 type="button" 属性到按钮。
通过 npm install 安装 jquery 并将它们添加到 angular-cli.json

这有助于加载 jquery，现在正在调用 component.ts 中编写的内部方法。

谢谢大家的回复。

在 Angular 4 中单击按钮时执行自定义 Javascript 函数

Execute custom Javascript function on button click in Angular 4

javascript

angular

angular4-forms