如何添加招摇的用户界面在你的角度应用程序中?
我已经多次搜索这个问题,发现只有一个解决方案,并且它是使用完成的swagger-ui-dist
包,但在最新版本的https://www.npmjs.com/package/swagger-ui
告诉使用swagger-ui
代替swagger-ui-dist
对于单页应用程序。
有一个解决方案是添加这个包来进行反应,并且解释得很好。
Swagger-UI 与 React -https://swagger.io/blog/api-documentation/building-documentation-portal-swagger-tutorial/ https://swagger.io/blog/api-documentation/building-documentation-portal-swagger-tutorial/
我在我的角度应用程序中实现了此功能,并认为它对其他开发人员也有帮助。我在多个地方进行了搜索并阅读了多个博客。
Steps -
-
安装 swagger-ui
npm i swagger-ui
-
配置 angular.json 文件和 swagger-ui CSS 模块。
"styles": [ "./node_modules/swagger-ui/dist/swagger-ui.css"]
-
将 swagger-UI 的 import 语句添加到您的 component.ts 文件中。
import SwaggerUI from 'swagger-ui';
-
将以下代码添加到组件的 ngOnInit 中。
// example-swagger-exp.component.ts
ngOnInit() {
SwaggerUI({
domNode: document.getElementById('swagger-ui-item'),
url: 'https://petstore.swagger.io/v2/swagger.json'
});
}
-
该功能的最后一部分,
将以下代码添加到组件的 HTML 文件中
// swagger-exp.component.html
<div id="swagger-ui-item"></div>
Note- 最后一件重要的事情,
如何在步骤 4 中添加 swagger.json/swagger.yaml 对象?
只需将“url”参数替换为“spec”并添加 JSON 对象即可。
SwaggerUI({
domNode: document.getElementById('api-data'),
spec : your json object
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)