Angular 5 TypeScript Bootstrap Dropdown无法通过JavaScript工作

Question

我遵循了引导程序的方式，并将来自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() ，瞧瞧Dropdown可以正常工作了。 现在，我想将此JavaScript调用添加到标头组件的OnInit块中，如下所示：

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

不幸的是，这不起作用，因为编译器抱怨：

src / app / header / header.component.ts（16,27）中的错误：错误TS2339：类型“ JQuery”上不存在属性“下拉”。

jQuery应该可以工作，因为它包含在我的package.json "@types/jquery": "^3.3.0" ，引导程序版本是"bootstrap": "^3.3.7",

Answer 1

对于我来说，我建议不要使用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风格的所有Bootstrap功能。

Answer 2

尝试改用ngAfterViewInit生命周期挂钩，该挂钩在最初呈现视图后调用，以便可以访问视图成员