функция не определена в HTMLButtonElement.onclick Angular 4 - PullRequest
2 голосов
/ 26 марта 2020

Я новичок в Angular и у меня есть эта ошибка:

"openClose не определено в HTMLButtonElement.onclick (index: 13)"

I искал все возможные ответы на этот вопрос, но дело в том, что ошибка находится на странице индекса, а не в любом из файлов приложения. Я вставлю свой код сюда в надежде, что кто-то знает, что делать.

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 между скобками класса экспорта AppComponent {}

  • в индексе. html оставляя только

  • , помещая код клика в теги в индексе. html и затем его работает с 0 ошибками

Может кто-нибудь помочь?

Ответы [ 2 ]

3 голосов
/ 26 марта 2020

Так и должно быть. :

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

В файле Component.ts. :

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

Обратите внимание: прямой доступ к элементу DOM в Angular.

не рекомендуется. Просто для того, чтобы ваш сценарий работал, добавив демонстрацию Stackblitz: Demo

1 голос
/ 26 марта 2020

onclick в кнопке не может вызвать функцию компонента, она должна вызываться с кодом 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';
        });
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...