Angular 6 和语义 UI 集成答案

【问题标题】：Angular 6 and Semantic UI integrationAngular 6 和语义 UI 集成
【发布时间】：2018-11-07 16:58:19
【问题描述】：

如标题所示，我会将 Semantic UI 集成到我的 Angular 6 中以使用非常好的 Web 控件。

我找到了 Angular 官方 Ng-Book 的示例（第 32 页），我看到我应该从书库中复制并粘贴一些文件（src/app/vendor/、src/assets/images/ 和 src/样式.css）。好的，它可以工作，但这是来自已经构建的应用程序的具体示例，我想很好地了解在一般情况下如何制作它。

所以，我搜索了一些通用的方法来制作它，而不仅仅是本书代码中引用的这个例子。而且，在 Semantic UI 官方网站上，我看到 Angular 6 特定的集成工具还没有开发出来；我发现只有一个非常古老的实现，称为 Angular 1.x。

由于这个原因，我问你：我怎样才能正确（手动）将语义 UI 集成到我的 Angular 6 应用程序中，我怎样才能在我的代码中调用几个非常简单的自定义控件？这也是一个非常简单的示例，例如 Semantic-UI 文本字段或 Semantic-UI 按钮。有很简单的教程链接或者分步说明吗？

非常感谢大家！

【问题讨论】：

没什么特别的，就像您集成任何其他 3rd 方库的方式一样。 npm install 添加到 angular.json 用于 javascript 和 css 或通过 style.scss 导入 css。
首先，非常感谢您的快速回复。你能给我举个小例子吗？抱歉，我不是 Angular 方面的专家……谢谢！

标签： angular angular6 semantic-ui

【解决方案1】：

在您的 Angular 项目中：

npm install semantic-ui --save

angular.json 文件：

{ ... "styles": [ "node_modules/semantic-ui/dist/semantic.min.css", "src/styles.css" ], ... }

就是这样！

编辑：现在您可以在 Angular 项目中使用语义 UI CSS 类。

https://stackblitz.com/edit/angular-tfnnry

【讨论】：

非常感谢...我尝试并正确导入。最后一步（网页整合）呢？我搜索了一个非常简单的示例（即在我的页面中添加一个简单的选项卡）并尝试了本教程，但它不起作用。 codepen.io/Siyanda/pen/Xmmzbe你能否给我一个非常简短的例子，只是为了整合一些东西，比如一个按钮或一个文本框？