Angular + .Net Core 2.0 应用：CSS 和 JS 导入答案

【问题标题】：Angular + .Net Core 2.0 app: CSS and JSs importsAngular + .Net Core 2.0 应用：CSS 和 JS 导入
【发布时间】：2017-10-12 18:05:33
【问题描述】：

当我开始我的应用程序时，我一直在寻找一个漂亮的多选菜单，并找到了this。从它的 npm 命令安装它后，我将它的 CSS 文件包含在 Views/Shared/_Layout.cshtml 中。对于 bootstrap-select.js，如果我将其导入组件中，菜单将不起作用。所以我导入了整个东西

import 'bootstrap-select';

在 bootbrowser.ts 文件中，它工作得很好。

我计划在我的应用程序中使用其他如此漂亮的插件，但我担心当您只打算在一个或两个组件中使用这些文件时，这是否是导入和包含这些文件的最佳做法。加载所有 CSS 和 JS 时，我的应用程序会变慢吗？

我一直想知道是否有充分的理由避免将 jQuery 与 bootstrap 和 angular 一起使用？

【问题讨论】：

【解决方案1】：

我认为通常最好不要在您的应用程序中包含 jquery。这是一种混合框架，我认为 Angular 不希望你自己直接使用 JQuery 之类的东西直接访问 DOM。他们有一个变更检测系统，可能与 JQuery 插件可能正在做的事情不同步。

我认为在构建应用程序时始终需要考虑大小。希望您可以研究延迟加载。然后这些 javascript 和 css 文件只会在您进入网站的这些部分时加载。无论您是使用 Jquery 插件还是编写自己的代码，都需要考虑这一点。

我建议您查看 Angular 第三方库。我用过NgPrime一点点。他们有很多不错的选择，包括多选。它们也是在 Angular 中构建的，因此包含它们只是包含一个角度组件。您可以在带有标签的 Angular 模板中使用它：

<p-multiSelect [options]="cities" [(ngModel)]="selectedCities"></p-multiSelect>

希望这会有所帮助！

【讨论】：

NgPrime 似乎很有希望！谢谢！当我通过 NPM 命令安装时，安装步骤令人困惑。如果 node_modules 文件夹中已经存在 CSS 和 JS 文件，我是否需要将其包含到我的组件中？
他们的文档有点混乱。我认为他们在谈论做同一件事的两种方法。希望您使用 Angular cli 来创建您的项目，并且应该很容易将 NgPrime 添加到您的供应商包中。他们在primefaces.org/primeng/#/setup 的文档中有一个名为“Angular CLI 集成”的部分。我会遵循的。将 font-awesome 和 ngprime 添加到依赖项中。并选择您喜欢的 css 样式并将其添加到您的样式部分。两者都应该在您的 angular-cli.json 文件中。然后你可以在你的任何 Angular 文件中导入 ngprime 的东西！