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

Question

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

该项目是使用ASP.Net Core SPA Services模板创建的。我已将“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相关文件移动到相应的角度组件文件夹并尝试从那里导入。然后我得到这个错误。

'allowJs未设置。

我在tsconfig中添加了'allowJs'。仍然错误不会消失。

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

任何帮助表示赞赏。

Answer 1

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"
});

应将此类逻辑提取到专用函数或服务中，以保持视图清晰。

Answer 2

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

component.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);
 }
}