Bootstrap на Angular 7 получает ошибку, так как «Свертывание свойства не существует для типа« JQuery <HTMLElement>»

Question

Я пытаюсь закрыть панель collapse по щелчку вне выпадающего списка.я пытаюсь с помощью следующего кода:

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';
declare var $:JQueryStatic;
import { State } from "./../../state/app.state";
import * as fromSetupConfig from "./../../setup-config/state/setup-config.reducer";

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

    constructor(private store:Store<State>) { }

    currentName:string;

    ngOnInit() {

        this.store.pipe(select(fromSetupConfig.getCurrentName)).subscribe(newName => {
            this.currentName = newName
        });

        $(document).click(function(e) {
            if (!$(e.target).is('.panel-body')) {
                $('.collapse').collapse('hide');      //throws error  
            }
        });

    }

}

Но получаю ошибку как ошибку: Property collapse does not exist on type JQuery` - как это исправить?

Answer 1

Проблема, с которой вы столкнулись, связана с компилятором машинописи.Чтобы обойти это, вы можете инициализировать коллапс и другие элементы в базовом файле JS.Вам нужно будет импортировать этот файл, поэтому создайте его либо в папке ресурсов (и свяжите его в вашем index.html), либо в другом месте и упомяните его в части scripts вашего angular.json.

Для инициализации свертывания содержимое этого JS-файла будет следующим:

$(document).click(function(e) {
    if (!$(e.target).is('.panel-body')) {
        $('.collapse').collapse('hide');      //throws error  
    }
});

Это инициализирует все функции Jquery, когда документ будет готов.

Если вы хотите сделать это в определенный момент в угловом потоке, оберните вызов в функцию следующим образом:

function collapse() {
  $(document).click(function(e) {
    if (!$(e.target).is('.panel-body')) {
        $('.collapse').collapse('hide');      //throws error  
    }
  });
}

Чтобы вызвать его в файле Typescript, вынужно сначала объявить функцию.Например, чтобы инициализировать функции jquery в ngOnInit():

declare function collapse();
ngOnInit() {
  collapse();
}

Таким образом, вам не нужно никуда вставлять import 'bootstrap';, поэтому вы не сломаете другие компоненты.