Попытка выполнить функцию из html в Angular 8 - PullRequest
Новая
       2

Попытка выполнить функцию из html в Angular 8

0 голосов
/ 23 марта 2020

Я работаю с Angular 8, и когда я нажимаю кнопку, необходимо выполнить функцию javaScript, но это не работает.

У меня есть метод, который я нашел здесь, как импортировать external javaScript.

Цель кнопки - скрыть панель навигации.

У меня есть такой код: 

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery'

@Component({
  selector: 'app-home-admin',
  templateUrl: './home-admin.component.html',
  styleUrls: [
    './home-admin.component.css',
    './Style/style.css'
  ]
})
export class HomeAdminComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.loadScript('https://code.jquery.com/jquery-1.12.0.min.js');
    this.loadScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js');
    this.loadScript('https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js');

  }

  public loadScript(url: string) {
    const body = <HTMLDivElement>document.body;
    const script = document.createElement('script');
    script.innerHTML = '';
    script.src = url;
    script.async = false;
    script.defer = true;
    body.appendChild(script);
  }

  click($event) {

    $('#sidebarCollapse').on('click', function () {
      $('#sidebar, #content').toggleClass('active');
      $('.collapse.in').toggleClass('in');
      $('a[aria-expanded=true]').attr('aria-expanded', 'false');
    });
  }

}


<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- Scrollbar Custom CSS -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
    </head>

    <body>
        <div class="wrapper">
            <nav id="sidebar">
                <div class="sidebar-header">
                    <h3 align="left">CHROMAE PROJECT</h3>
                </div>
            </nav>
            <div id="content">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button class="btn btn-info navbar-btn" type="submit" (click)="click($event)">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span>MENÚ</span>                               
                            </button>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </body>
</html>

Я пытаюсь поставить функцию в html, но это не работает.

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

1 Ответ

2 голосов
/ 23 марта 2020

Как уже упоминалось в комментариях, вы не хотите использовать jQuery для этого. Это огромный анти-паттерн по всей причине, почему кто-то go с Angular на первом месте.

В вашем случае вам необходимо сначала удалить весь код jQuery и связать (click) событие для фактического метода в вашем Component.

Во-вторых, Angular Компоненты сделаны из HTML фрагментов, а не полного документа HTML. При этом вы можете опустить html теги.

Наконец, не не загружает скрипты, вставляя их в DOM, как вы делаете. Если вам нужна внешняя библиотека, установите ее с помощью ng add или npm install и загрузите в свой код с помощью операторов import. Если вы этого не сделаете, он не сможет быть найден веб-пакетом.

Вот пример того, как должен выглядеть ваш код: 

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

@Component({
  selector: 'app-home-admin',
  templateUrl: './home-admin.component.html',
  styleUrls: [
    './home-admin.component.css',
    './Style/style.css'
  ]
})
export class HomeAdminComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}
  myClickEvent(evt: MouseEvent): void {
    alert('The button was clicked');
  }

}
<div class="wrapper">
  <nav id="sidebar">
    <div class="sidebar-header">
      <h3 align="left">CHROMAE PROJECT</h3>
    </div>
  </nav>
  <div id="content">
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button class="btn btn-info navbar-btn" type="submit" (click)="myClickEvent($event)">
                                <i class="glyphicon glyphicon-align-left"></i>
                                <span>MENÚ</span>                               
                            </button>
        </div>
      </div>
    </nav>
  </div>
</div>

Вы должны go потратить пару часов, работая на примере Angular Tour of Heroes . Он охватит некоторые из этих фундаментальных понятий.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...