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

【问题标题】：function is not defined at HTMLButtonElement.onclick Angular 4函数未在 HTMLButtonElement.onclick Angular 4 中定义
【发布时间】：2023-03-13 20:33:01
【问题描述】：

我是 Angular 的新手，我遇到了这个错误：

“openClose 未在 HTMLButtonElement.onclick (index:13) 处定义”

我搜索了所有可能的答案，但问题是错误出现在索引页面中，而不是任何应用程序文件中。我将我的代码粘贴在这里，希望有人知道该怎么做。

app.component.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>

app.component.ts

import { 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';
    });
}

index.html

<!doctype html>
<html lang="en">
<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 中的代码放在 export class AppComponent {}
在index.html中只留下
将点击的代码放入 index.html 中的标签中，然后它可以使用 0 错误

谁能帮忙？

【问题讨论】：

标签： javascript html angular typescript

【解决方案1】：

这是应该的。：

<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 演示：Demo

【讨论】：

考虑到 Angular 和 typescript，这更有意义，但现在我的错误是 Cannot read property 'addEventListener' of null。你也可以帮我解决这个问题吗？
@kaja111 你的要求是什么？你想达到什么目标？
我正在尝试制作一个模式，点击“btn1”，“bg-modal”应该变得可见，而它通常被css隐藏。我只用 html 和 javascript 来做这件事，它工作了，现在我正在尝试将它转换为一个角度组件..
@kaja111 您正在使用哪个库。 ?它是引导程序吗？
谢谢！通过您的演示，一切都按照我的意愿进行！我现在看到我试图让它变得比它真正需要的更复杂，作为一个新手的缺点。感谢您的宝贵时间和帮助

【解决方案2】：

onclick at button 不能调用组件的功能，必须用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';
        });
    }
}

【讨论】：

【解决方案3】：

如果您使用 Angular，您应该提及您想要使用的事件。如果你想使用点击事件，那么你应该像这样使用：

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

因为 Angular 没有类似的事件

点击

【讨论】：