问题标签 [ng2-bootstrap]

I have an Angular 2 app that works fine as is and I wanted to add modals to it, so I performed the installation instructions exactly like Doug said here: https://github.com/dougludlow/ng2-bs3-modal

The instructions say to either use the script tag in the index.html page to load the library or use the system loader. Since all the other modules are loaded via script tags I did the script tag load for this one as well.

Inside of my component, the import appears to get recognized okay in VSCode, as it is displaying the various items that the ng2-bs3-modal has and not showing any errors in the edit mode.

However when I try to run the app, it doesn't run, and the developer tool shows that it is trying to make an http call to /ng2-bs3-modal/ng2-bs3-modal. All imported modules are contained in the node_modules folder, so I'm not sure why 1) this http call is being made from the component, and 2) why it would be looking from the root folder instead of the node_modules folder.

On page load the error shown in dev tools console log is :

index.html - As I said, everything works fine before trying to add the modal. I used the script tag inclusion, not the system version, and I have included the entire index.html file below.

browse-component.ts

If I remove the ng2-bs3-modal import from the component, everything runs normally as before

All the demos and examples have the index.html file with the js file being loaded via the system.config, so I'm wondering was this ever tested with the script tag loading as mentioned in the instructions.

如何使用 Bootstrap（或任何其他）组件库？克里斯托弗 · 6 分钟前

任何人都可以帮助提供有关如何包含引导组件的示例代码

我正在尝试使用引导警报。我安装了 npm 包并将包添加为：

警报组件.ts：

app.component.ts

systemjs.config.js

我收到错误

data(?Array) - 要设置的初始选择数据。在输入类型为“Single”的情况下，这应该是具有 id 和 text 属性的对象，否则应该是此类对象的数组。此选项与值互斥。

这是来自网站文档。GitHub 调用 initData 会引发错误。

我正在使用一组有效选项设置 [data]，但没有选择任何内容。此外，每次打开下拉菜单时，我都会看到它甚至会触发。

这也不适用于单一模式。

如何为该控件预先选择“选项”？

我将它与 RC.1 一起使用。SO 上的其他解决方案看起来像旧版本的 ng2。

我一直在实施 ng2-bootstrap 和 Angular2。

我无法弄清楚如何使移动导航栏打开/关闭。

这是还不支持的东西吗？还是我错过了什么？

更新，html：

打字稿：

我想从组件中打开对话框：

作为 bsModel 的 lgModal.show() 打开对话框，我如何从组件打开对话框：

我不能从组件中执行类似 lgModal.show() 的操作吗？

1. 索引.html

   /li>

2. 包.json

   /li>

3. tsconfig.json

   {“compilerOptions”：{“target”：“es5”，“module”：“system”，“moduleResolution”：“node”，“sourceMap”：true，“emitDecoratorMetadata”：true，“experimentalDecorators”：true，“removeComments ": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }

4. 打字.json

   {“ambientDependencies”：{“es6-shim”：“github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2”}}

5. 应用程序/main.ts

   import {bootstrap} from 'angular2/platform/browser' // import bootstrap import {AppComponent} from './app.component' // 导入我们刚刚创建的组件 import {AComponent} from './a.component' // //从'./user-login.component'导入{UserLoginModalComponent} //

   引导程序（应用程序组件）；// 最后引导它。引导程序（AComponent）；//bootstrap(UserLoginModalComponent);

6. 应用程序/app.component.ts

   /li>

7. 应用程序/a.component.ts

   /li>

8. 应用程序/用户登录.component.ts

   /li>

我看到 ng2-bs3-modal 模块仍在尝试访问 @angular/core，我认为它应该指向 angular2/core？我还尝试在系统配置 js 中添加“地图”，但在访问 @angular/core 时它没有采用“.js”扩展名（即使系统配置 js 中存在 defaultExtension：“js”）。

请帮忙！！！

下面是控制台日志跟踪，

angular2-polyfills.js:127 获取http://localhost:3000/@angular/core404（未找到）scheduleTask@angular2-polyfills.js:127ZoneDelegate.scheduleTask@angular2-polyfills.js:362Zone.scheduleMacroTask@angular2-polyfills.js:299（匿名函数）@angular2-polyfills.js:148send@VM1684:3fetchTextFromURL @system.src.js:1156(匿名函数)@system.src.js:1739ZoneAwarePromise@angular2-polyfills.js:610(匿名函数)@system.src.js:1738(匿名函数)@system.src.js :2764(匿名函数)@system.src.js:3338(匿名函数)@system.src.js:3605(匿名函数)@system.src.js:3990(匿名函数)@system.src.js:4453 (匿名函数)@system.src.js:4705(匿名函数)@system.src.js:408ZoneDelegate.invoke@angular2-polyfills.js:349Zone.run@angular2-polyfills.js:242(匿名函数)@angular2 -polyfills.js:597ZoneDelegate.invokeTask@angular2-polyfills.js:382Zone。runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452 angular2-polyfills.js:349 错误：错误：XHR 错误（404 未找到）正在加载http://localhost:3000/@angular/core (…)

Angular2 的新手，我正在尝试按照步骤实现 ng2-bootstrap 指令，但没有成功。我遇到了这个奇怪的、浪费时间的错误“未捕获的 ReferenceError：未定义要求”

我的 index.html 文件看起来像

谢谢你的帮助

我正在使用来自 ng2-bootstrap 的 datepicker。

https://valor-software.com/ng2-bootstrap/#/datepicker

我在组件中导入了 DATEPICKER_DIRECTIVES

将其添加到指令列表

然后在我的模板中我像这样使用它：

我的 systemjs 配置如下所示：

一切都编译没有任何错误，但是当我在浏览器中运行它时，它会在控制台中显示以下错误：

我不确定为什么它仍在 /content/node_modules/ng2-bootstrap/components/datepicker 中搜索 datepicker，我已指定在 node_modules/ng2-bootstrap/components/datepicker 中查找。

我将ng2-bootstrap用于模态内容。

我正在尝试将我的模态和其他组件分开。所以我有以下文件：

addPlaylist.modal.ts

addPlaylistModal.html

在它的父组件的html中，我有这样的代码：

这是父组件： channel.component.ts

我想要做的是，即使我在父组件中编写 (click)="lgModal.show()" ，我也希望能够让父组件访问它并打开模式。

现在如果我点击 <a (click)="lgModal.show()"><span class="bigplus pull-right"></span></a>，它会说“无法读取未定义的属性显示”

那么，如何让父组件知道 lgModal 已定义并且在其子组件中。

我正在尝试在 angular 2 rc2 种子项目中使用 ng2-bootstrap 单选按钮。以下代码在我们的 angular 2 rc1 项目中没有任何问题。现在我正在尝试创建一个https://github.com/mgechev/angular2-seed用作基础的种子项目，但无法正确执行。

我以下列方式使用 ng2-bootstrap 单选按钮指令：

我在 seed.config.ts 中包含了 ng2-bootstrap 和 moment库。我尝试了许多变体（也有ng2-bootstrap/ng2-bootstrap等）

我导入以下指令

并由我的组件使用

我构建项目没有任何问题，但是当我运行服务器时，我得到以下运行时异常：

我确信与 ngModel 的双向绑定在这里被破坏了。我已经将此代码与 rc1 捆绑包一起使用，并且没有种子项目。现在我不确定，可能是什么问题 - 新的角度版本，或使用构建系统（在我的情况下 - gulp）。

我希望任何人都可以提供建议。提前谢谢了。

编辑自 21.06.2016

使用的包的版本如下：