1

我正在使用 angular-cli 1.0.0-beta。18 并尝试使用https://ng-bootstrap.github.io/#/getting-started上的指南加载 ng-bootstrap

脚步：

使用安装 ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

将以下内容添加到 app.module.ts

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

对于我的 ibox-tools.module.ts 我有

import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {IboxToolsComponent} from "./ibox-tools.component.ts";
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
    declarations: [IboxToolsComponent],
    imports     : [NgbModule, BrowserModule],
    exports     : [IboxToolsComponent],
})

export class IboxToolsModule {}

然后我尝试在 ibox-tools.template.html 中使用 ngbDropdown 模块

<div class="col-xs-6">
        <div ngbDropdown class="d-inline-block">
            <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <button class="dropdown-item">Action - 1</button>
                <button class="dropdown-item">Another Action</button>
                <button class="dropdown-item">Something else is here</button>
            </div>
        </div>
    </div>

但是 ngbDropdown 不起作用。我没有收到任何错误，包括 bootstrap4.css 等。

入门指南告诉我使用

map: {
  '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js',
}

如果我使用 SystemJS，但我认为并非如此，如 angular-cli 1.0.0-beta。18 正在使用 Webpack，应该会自动加载 ng-bootstrap。我在这里错了吗？我没有找到应该添加映射的任何地方，其他人设法将 ng-bootstrap 与 angular-cli 1.0.0-beta 一起使用。18？

4

1 回答 1

0

对不起这是我的错。我还在学习 angular2，问题是我包含了我的 ibox-tools。组件.ts 到另一个模块，而不是 ibox-tools。module .ts 是必需的，所以我错过了在 ibox-tools.module.ts 中导入的辅助模块的 ng-bootstrap ；）

所以 webpack 工作得很好，不需要像 systemjs 那样映射。

希望您理解我的回答，如果不只是问，我可以尝试更好地解释。

于 2016-11-08T14:22:29.500 回答