为了账号安全,请及时绑定邮箱和手机立即绑定

函数未在 HTMLButtonElement.onclick Angular 4 中定义

函数未在 HTMLButtonElement.onclick Angular 4 中定义

德玛西亚99 2023-10-10 15:05:01
我是 Angular 新手,遇到以下错误:“openClose 未在 HTMLButtonElement.onclick (index:13) 中定义”我搜索了所有可能的答案,但问题是错误出现在索引页面中,而不是出现在任何应用程序文件中。我将在这里粘贴我的代码,希望有人知道该怎么做。应用程序组件.html<button id="btn1" class="btn1" onclick="openClose(this, 'bg-modal')">Click me </button>    <div class="bg-modal" id="bg-modal">        <div class="modal-content">      <div class="col-12">        <div class="close" id="close">+</div>        <h2>Modal</h2>        <hr>      </div>      <div class="col-12">        <div class="contents">        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>        </div>        </div>      <div class="confirm" id="confirm">OK</div>      </div>    </div>应用程序组件.tsimport { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css',  './video-style.css']})export class AppComponent {}function openClose(btn1, bgmodal){    document.getElementById('.btn1').addEventListener('click', function(){    document.getElementById('.bg-modal').style.display='flex';    });}索引.html<!doctype html><html><head>  <meta charset="utf-8">  <title>Modal</title>  <base href="/">  <meta name="viewport" content="width=device-width, initial-scale=1"></head><body><app-root></app-root></body></html>我努力了:将 app.component.ts 中的代码放在导出类 AppComponent {} 的括号之间在index.html中只留下将点击代码放入index.html 中的标签中,然后它会出现 0 错误有人可以帮忙吗?
查看完整描述

3 回答

?
有只小跳蛙

TA贡献1824条经验 获得超8个赞

事情应该是这样的。:

<button id="btn1" class="btn1" (click)="openClose($event, 'bg-modal')">Click me </button>

在 Component.ts 文件中。:

public openClose(event, bgmodal){
       .... rest of code 
    }

请注意:在 Angular 中不建议直接访问 DOM 元素。

只是为了让您的场景正常工作,添加 Stackblitz 演示:演示


查看完整回答
反对 回复 2023-10-10
?
慕桂英4014372

TA贡献1871条经验 获得超13个赞

onclickat按钮不能调用组件的函数,必须用javascript代码调用,例如:onclick="console.log('sss')"


如果你想调用组件的功能:


.html:


<button id="btn1" class="btn1" (click)="openClose(this, 'bg-modal')">Click me </button>

.ts:


import { Component } from '@angular/core';


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css',

  './video-style.css']

})

export class AppComponent {

    openClose(btn1, bgmodal){

        document.getElementById('.btn1').addEventListener('click', function(){

            document.getElementById('.bg-modal').style.display='flex';

        });

    }

}


查看完整回答
反对 回复 2023-10-10
?
呼啦一阵风

TA贡献1802条经验 获得超6个赞

如果您使用 Angular,您应该提及您想要使用哪个事件。如果你想使用点击事件那么你应该这样使用:

<button (click)="onSave()">Save</button>

因为角度没有任何类似的事件

单击时


查看完整回答
反对 回复 2023-10-10
  • 3 回答
  • 0 关注
  • 63 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信