Не удается скомпилировать приложение Angular при использовании плагина jQuery (Foundation 6 accordion) - PullRequest
Новая
       15

Не удается скомпилировать приложение Angular при использовании плагина jQuery (Foundation 6 accordion)

0 голосов
/ 08 мая 2018

У меня есть проект Angular 5 с меню Foundation 6 * (не путать с обычным аккордеоном). 

<ul id="sidenav-list" class="vertical menu accordion-menu" data-accordion-menu data-multi-open="false">
  <li [ngClass]="navSections.personalAndIncome.statusClass">
  <a (click)="handleUpdateClassesOnSectionNavigate('personalAndIncome')" data-toggle="tab" title="Personal and Income">
    <span [ngClass]="navSections.personalAndIncome.navIconClass"></span>
    <span class="round-tabs one">Personal &amp; Income</span>
  </a>

  <!-- Personal and Income Pages -->
  <ul id="personalPages" class="menu vertical nested" [ngClass]="navSections.personalAndIncome.expandedClass">

    <li>
      <a [ngClass]="navSections.personalAndIncome.pages.profile.statusClass" routerLink="personal-and-income/profile" title="Profile">
        <span class="round-tabs one">Profile</span>
        <span [ngClass]="navSections.personalAndIncome.pages.profile.statusIconClass"></span>
      </a>
    </li>

    ...
  </ul>
</ul>

И в моем контроллере у меня очень простая функция ngOnInit 

ngOnInit() {
  $('#sidenav-list').foundation('down', $('#personalPages'));    
}

Этот код работает нормально и работает отлично - подсписок personalPages расширен, как и ожидалось. Однако я получаю следующую ошибку от ng serve.

ОШИБКА в src / app / form / nav-components / side-nav / side-nav.component.ts (64,43): ошибка TS2345: Аргумент типа 'JQuery' не может быть назначен параметру типа 'string | Опции'. Тип 'JQuery' не имеет общих свойств с типом 'Options'.

Похоже, что TS использует интерфейс для обычных аккордеонов для этого вызова в элементе меню аккордеона (обычные документы по аккордеону здесь , обратите внимание, что вторым аргументом для foundation () является объект $ options для обычный аккордеон, но в документах указан объект jQuery для меню аккордеона)

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Тип <HTMLElement> нельзя использовать с jQuery, , потому что это не элемент HTML , это элемент jQuery, то есть оболочка вокруг и HTMLElement.

Это также вызывало у меня головную боль, когда я пытался использовать плагин jQuery (средство выбора даты) с моим приложением Angular.

Сначала убедитесь, что установлены типы jquery: 

npm install --save @types/jquery

Таким образом, вы можете импортировать jQuery в свой компонент / сервис и иметь $ в наличии: 

import 'jquery';

Далее, убедитесь, что jQuery и ваш базовый плагин добавлены в ваше приложение Angular, для Angular-cli вы можете использовать файл angular-cli.json, и должно быть что-то сопоставимое для не-Angular Angular: 

...
"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../some/path/to/foundation.js"
],
...

В-третьих, чтобы пропустить все HTMLElement ошибки, оберните селектор в (...) и присвойте ему тип any: 

// Use either this
(<any> $('#sidenav-list')).foundation(...);

// Or this
($('#sidenav-list') as any).foundation(...);

Возможно, вам также придется обернуть $('#personalPages'), но я не уверен.

Теперь вы должны быть в состоянии успешно обслуживать и / или создавать ваше приложение.

0 голосов
/ 01 июня 2018

Дело в том, что компилятор использует typescript definition файлы для компиляции вашего приложения с использованием машинописного текста. поэтому, когда вы используете плагин jquery, вы должны найти его файл типа .d.ts.

Я провел небольшое исследование и нашел нужный вам тип файла.

тональный крем

После того, как вы выполните шаги установки, убедитесь, что вы используете правильную версию плагина js, которая соответствует файлу @types.

0 голосов
/ 08 мая 2018

Вот моя точка зрения. Функция ожидает строку, но вы передаете объект Jquery. Сама основа уже основана на jQuery, поэтому вам не нужно добавлять объект jQuery. Вам нужно только указать цель в виде строки. Так что вы должны сделать это 

ngOnInit() {
  $('#sidenav-list').foundation('down', '#personalPages');    
}
...