Angular 5 TypeScript引导下拉列表无法通过JavaScript工作

我遵循引导的方式，将演示示例从添加到导航栏中的angular应用程序中

由于切换下拉菜单没有任何效果，因此这无法在开箱即用。 在进一步阅读之后，我通过javascript激活了下拉列表。

我在浏览器中执行了

$（'.dropdown toggle'）.dropdown（）

，瞧，下拉菜单按预期工作。现在我想将此JavaScript调用添加到我的头组件的

OnInit

块中，如下所示：

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

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

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

---

Jquery应该可以工作，因为它包含在我的包中。json

“@types/Jquery”：“^3.3.0”

，引导版本是

“引导”：“^3.3.7”，

尝试改用ngAfterViewInit lifecycle hook，它在视图最初呈现后调用，以便我可以访问视图成员，我建议将jQuery排除在外，检查它是否遵循相同的实现您只需要使用这两个指令来指定哪个是下拉菜单

下拉菜单

，谁触发下拉菜单

下拉菜单打开

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);

从“@angular/core”导入{Component}；
从“ngx下拉菜单”导入{DropdownModule}；
@组成部分({
选择器：“应用程序”，
模板：`






我的英雄







单击项目时不可关闭







`
})
导出类AppComponent{
}
@NGD模块({
进口：[
浏览器模块，
下拉模块
],
声明：[
应用组件
],
引导：[
应用组件
]
})
导出类AppModule{
}
platformBrowserDynamic（）.bootstrapModule（AppModule）；

---

如果您想更多地使用引导Javascript功能，我建议您考虑一下，因为它以Angular的风格处理所有引导功能

如果您为它使用一个包，而不是将jQuery与Angular混合使用，那么效果会更好：这不起作用。为什么这会对编译器产生任何影响？在视图未呈现之前，元素标记将不可供脚本使用。好的，谢谢你的回答，我认为我必须完全使用ngx引导，因为直接使用引导似乎没有“简单”的方法。