代码之家 › 专栏 › 技术社区 › mrkernelpanic

angular 5 typescript引导下拉列表无法通过javascript工作

twitter-bootstrap-3 twitter-bootstrap angular jquery javascript

mrkernelpanic · 技术社区 · 8 年前

我按照引导方式添加了 https://getbootstrap.com/docs/3.3/javascript/#via-data-attributes-1 进入导航栏里我的角度应用程序。

这不是开箱即用的,因为切换下拉菜单没有效果。在进一步阅读之后,我来到了通过javascript激活下拉菜单的acrosss。 https://getbootstrap.com/docs/3.3/javascript/#via-javascript-1

我处决 $('.dropdown-toggle').dropdown() 在浏览器和voila中,下拉菜单按预期工作。现在我想将这个javascript调用添加到 OnInit 我的头组件块如下:

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

不幸的是,这不起作用,因为编译器抱怨:

src/app/header/header.component.ts(16,27)中的错误:错误ts2339: 类型“jquery”上不存在属性“dropdown”。

jquery应该可以工作,因为它包含在my package.json中 "@types/jquery": "^3.3.0" 引导版本是 "bootstrap": "^3.3.7",

2 回复 | 直到 8 年前

Theophilus Omoregbee 8 年前

对我来说,我建议不要用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);

如果您想更多地使用引导javascript功能,我建议您看看 https://valor-software.com/ngx-bootstrap/ 因为它以Angular的风格处理所有引导功能

Tom Ben Ezra 8 年前

尝试改用ngafterviewinit生命周期钩子,该钩子在最初呈现视图之后调用,以便可以访问视图成员