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生命周期掛鈎，該掛鈎在最初呈現視圖后調用，以便可以訪問視圖成員