Angular 5 TypeScript Bootstrap Dropdown не работает через JavaScript - PullRequest
Новая
       96

Angular 5 TypeScript Bootstrap Dropdown не работает через JavaScript

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

Я пошел по пути начальной загрузки и добавил демонстрационный пример из https://getbootstrap.com/docs/3.3/javascript/#via-data-attributes-1 в мое угловое приложение внутри навигационной панели.

Это не сработало из коробки, так как переключение выпадающего меню не имело никакого эффекта.После прочтения я наткнулся на активацию выпадающего через Javascript.https://getbootstrap.com/docs/3.3/javascript/#via-javascript-1

Я выполнил $('.dropdown-toggle').dropdown() в браузере и вуаля выпадающее меню работало, как и ожидалось.Теперь я хотел добавить этот вызов JavaScript в блок OnInit моего компонента заголовка следующим образом: 

ngOnInit(): void {
   $('.dropdown-toggle').dropdown();
}

К сожалению, это не работает, так как компилятор жалуется на:

ОШИБКА в файле src / app / header / header.component.ts (16, 27): ошибка TS2339: не существует свойства «выпадающее меню» для типа «JQuery».

Jquery должен работать, так какон включен в мой пакет. json "@types/jquery": "^3.3.0" и версия начальной загрузки "bootstrap": "^3.3.7",

Ответы [ 2 ]

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

Для меня, я предлагаю оставить jQuery вне этого, посмотрите https://github.com/pleerock/ngx-dropdown, который следует той же реализации, вам просто нужно использовать эти две директивы, чтобы указать, что является раскрывающимся списком dropdown и кто запускает раскрывающийся список.dropdown-open

import {Component} from "@angular/core";
import {DropdownModule} from "ngx-dropdown";

@Component({
    selector: "app",
    template: `
<div class="container">

    <!-- a-style dropdown -->
    <div class="dropdown" dropdown>
        <a dropdown-open>My Heroes</a>
        <ul class="dropdown-menu">
            <li><a href="#">Badman</a></li>
            <li><a href="#">Sadman</a></li>
            <li><a href="#">Lieman</a></li>
        </ul>
    </div>
    <br/>

    <!-- button dropdown -->
    <div class="dropdown" dropdown>
        <button class="btn btn-primary" dropdown-open>My Heroes</button>
        <ul class="dropdown-menu">
            <li><a href="#">Badman</a></li>
            <li><a href="#">Sadman</a></li>
            <li><a href="#">Lieman</a></li>
        </ul>
    </div>
    <br/>

    <!-- dropdown with items that are not closing dropdown when you click on them -->
    <div class="dropdown" dropdown>
        <button class="btn btn-primary" dropdown-open>Not closable on items click</button>
        <ul class="dropdown-menu" dropdown-not-closable-zone>
            <li><a href="#">This dropdown will</a></li>
            <li><a href="#">not be closed when you</a></li>
            <li><a href="#">select any its items</a></li>
            <li><a href="#">this allows you to put</a></li>
            <li><a href="#">dynamic content into it</a></li>
        </ul>
    </div>

</div>
`
})
export class AppComponent {

}

@NgModule({
    imports: [
        BrowserModule,
        DropdownModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [
        AppComponent
    ]
})
export class AppModule {

}

platformBrowserDynamic().bootstrapModule(AppModule);

Если вы хотите больше работать с функциями Bootstrap Javascript, я предлагаю вам взглянуть на https://valor -software.com / ngx-bootstrap / все функции начальной загрузки в стиле Angular

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

Попробуйте вместо этого использовать хук жизненного цикла ngAfterViewInit, который вызывается после первоначальной визуализации представления, чтобы члены представления были доступны

...