从 Angular2 组件中的外部文件导入 JavaScript 对象

Question

我正在尝试在带有 TypeScript 的 angular2 项目中使用 SwaggerUI。 SwaggerUI 没有看到有 TypeScript 定义。所以我正在尝试使用 JavaScript 文件。

此项目是使用 ASP.Net Core SPA 服务模板创建的。我已将“dist”文件夹中的所有 SwaggerUI 文件添加到项目中的“wwwroot”文件夹中。

我在 _Layout.cshtml（查看页面）中的项目的“wwwroot”文件夹中引用了 SwaggerUI 的 JavaScript 文件，就像普通的 javascript 文件一样，并尝试使用 ShaggerUIBundle 对象。

_Layout.cshtml

<script src="/swagger-ui/swagger-ui-bundle.js"> </script>
<script src="/swagger-ui/swagger-ui-standalone-preset.js"> </script>

Swagger.Component.ts

//my import statements

export class SwaggerComponent implements OnInit {
    SwaggerUIBundle:any;
}

现在 SwaggerUIBundle 填充了我期望的对象。但我无法在组件中的任何地方使用它。

ngOnInit(): void {
 (<any>window).ui = this.SwaggerUIBundle({
    url: "<url>",
    dom_id: '#swagger-ui',
    presets: [
        this.SwaggerUIBundle.presets.apis
    ],
    plugins: [
        this.SwaggerUIBundle.plugins.DownloadUrl
    ],
    layout: "StandaloneLayout"
  })
}

this.SwaggerUIBundle 始终为空。

我认为这是因为实际上没有为 SwaggerUIBundle 分配任何值，尽管它已经填充了一个对象。

SwaggerUIBundle 是一个函数。我按照here 和here 的建议尝试了多种方法来分配此功能。

我尝试导入而不是引用文件。

import SwaggerUIBundle from 'path from root of the app'

由于“wwwroot”文件夹是一个虚拟文件夹，代表应用程序的根文件夹，当我尝试使用“import”导入时，TypeScript 编译器会抛出找不到文件的错误。

然后我将所有与 SwaggerUI 相关的文件移动到相应的 angular 组件文件夹并尝试从那里导入。然后我得到这个错误。

'allowJs 没有设置。

我已将“allowJs”添加到 tsconfig。错误仍然不会消失。

"compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "lib": [ "es6", "dom" ],
    "types": [ "node" ],
    "allowJs": true
  }

感谢任何帮助。

Answer 1

尝试以下方法来包含 javascript 文件，

组件.ts

@Component({
selector: 'test',
template: `
    <div class="row">
      Loading...
    </div>
    `,
styles: []
})
export class TestComponent {

public ngOnInit() {
    // Pass js file path
    this.loadScript('src/assets/js/myCropper.js');       
}

public loadScript(url) {
    console.log('preparing to load...')
    let js = document.createElement('script');
    js.src = url;
    js.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(node);
 }
}

Answer 2

this 指的是封闭类的一个实例，而不是定义该类的模块的词法环境。

而不是使用this导入并直接引用SwaggerUIBundle

import SwaggerUIBundle from 'path/to/swagger-ui/dist/bundle.js';

此外，您可能希望执行一次，而不是在 ngOnInit（每个组件的生命周期事件）中对其进行初始化

import SwaggerUIBundle from 'path/to/swagger-ui/dist/bundle.js';

SwaggerUIBundle({
  url: "<url>",
  dom_id: '#swagger-ui',
  presets: [
    SwaggerUIBundle.presets.apis
  ],
  plugins: [
    SwaggerUIBundle.plugins.DownloadUrl
  ],
  layout: "StandaloneLayout"
});

这种逻辑应该被提取到一个专门的函数或服务中，以保持你的视图干净。