Question

我有app.js文件：

var app = angular.module('app', ['kendo.directives', 'ui.router', 'app.sysSettings', 'app.globalConstants',
    'pascalprecht.translate', 'ngTouch', 'ngDialog', 'ngCookies']);

我想在我的ts文件中重用此变量（“ app”）。我的app.components.ts：

import { Component, Inject } from '@angular/core';
import { UpgradeModule } from "@angular/upgrade/static";
import { app } from  '../../apps/login/app';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private upgrade: UpgradeModule,
              private app_private: app.name) { }

  ngOnInit() {
    this.upgrade.bootstrap(document.body, [this.app_private]);
  }
}

我从'../../apps/login/app'导入了导入{app}；，然后将“ app”添加到构造函数中，并尝试在ngOnInit函数中使用它，但出现错误：

compiler.js:486 Uncaught Error: Can't resolve all parameters for AppComponent: ([object Object], ?).
    at syntaxError (compiler.js:486)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:15706)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:15541)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:15026)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver._getEntryComponentMetadata (compiler.js:15854)
    at compiler.js:15335
    at Array.map (<anonymous>)
    at CompileMetadataResolver.push../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15335)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._loadModules (compiler.js:34413)
    at JitCompiler.push../node_modules/@angular/compiler/esm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:34374)

有人建议如何在Typescript类中访问javascript文件的属性吗？预先谢谢大家...

Answer 1

请在app.js中使用它 export { app };

对上述答复感到抱歉。我以为app.ts不是.js

export关键字不适用于js文件

无法删除答案。

Answer 2

为了从文件导入对象，必须使用export关键字将其导出。但是，您的angularjs应用是在typescript之外的普通javascript文件中定义的，因此无法使用export。因此，要从打字稿访问它，首先必须将其带到打字稿级别，然后才能从组件中导入它。

因此，您可以创建以下ts文件，以将应用程序导入打字稿：

my-angularjs-app.ts

let angular = window['angular'];  // to avoid typescript syntax error

export const app = angular.module('app');

app.component.ts

然后您可以像这样在模块上使用它：

import { app } from  'my-angularjs-app';

// ...

export class AppComponent {
  constructor(private upgrade: UpgradeModule) { }

  ngOnInit() {
    this.upgrade.bootstrap(document.body, [app.name]);
  }
}

注意，您不必将其注入构造函数中，该值已经存在。

从Typescript类中的javascript文件导入代码

2 个答案: