Использование Javascript и Jquery в угловом проекте 6 cli

Question

Я использую угловой 6 cli и я хочу использовать jquery и javascript. я импортировал jquery и bootstrap, но все равно получаю ошибку при попытке использовать jquery. Я хочу использовать код ниже или преобразовать его в тс. Я посмотрел онлайн и последовал нескольким предложениям, но они не сработали.

Когда я добавляю приведенный ниже код в мой файл angular component.ts, он отмечает ошибку.

 $('.editValues').click(function () {
    $(this).parents('tr').find('td.editableColumns').each(function() {
      var html = $(this).html();
      var input = $('<input class="editableColumnsStyle" type="text" />');
      input.val(html);
      $(this).html(input);
    });
  });

отображаются следующие ошибки

ERROR in src/app/_services/user.service.ts(56,5): error TS1003: Identifier expected.
src/app/_services/user.service.ts(56,19): error TS1144: '{' or ';' expected.
src/app/_services/user.service.ts(56,26): error TS1138: Parameter declaration expected.
src/app/_services/user.service.ts(63,4): error TS1068: Unexpected token. A constructor, method, accessor, or property was expected.

я получаю эти ошибки, когда добавляю этот код. ОШИБКА в

src/app/_services/user.service.ts(56,5): error TS1003: Identifier expected.
    src/app/_services/user.service.ts(56,13): error TS1144: '{' or ';' expected.
    src/app/_services/user.service.ts(56,20): error TS1138: Parameter declaration expected.
    src/app/_services/user.service.ts(56,31): error TS1005: ';' expected.
    src/app/_services/user.service.ts(57,1): error TS1128: Declaration or statement expected.

Answer 1

Ваш код jQuery находится в теле класса, где компилятор ожидает конструктор, метод доступа, свойство или метод ( src / app / _services / user.service.ts (63,4): ошибка TS1068: Неожиданный токен. Ожидается конструктор, метод, метод доступа или свойство ).

Вы должны поместить его в метод.

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

@Component({
  selector: 'app-my-component',
  templateUrl: './app-my-component.html',
  styleUrls: ['./app-my-component.css'],
})
export class MyComponent implements OnInit, OnDestroy, OnViewInit {
  constructor(private store: Store<any>) {}

  ngOnInit() {
    // subscribe to store
  }

  ngOnDestroy() {
    // unsubscribe from store
  }

  ngOnViewInit() {
    // Put your jQuery code here
  }
}

Обратите внимание, что использование jQuery с современным Angular не очень рекомендуется и противоречит лучшим практикам. Подробнее: Лучшая практика Angular 2