Aurelia & Typescript 注入和继承

Question

我正在使用 Aurelia 和 Typescript，我正在尝试实现以下目标：有一个名为 Parent 的基础 class，在 [=61] 中扩展这个 class =] 调用 Child，然后在另一个 class 中注入 Child 的实例。这是设置：

//file1

export class Parent {
    constructor() {
        debugger;
    }
}

//file2
import {Parent} from "file1";
export class Child extends Parent {
    constructor() {
        super();
        debugger;
    }
}

//file3
import {inject} from "aurelia-framework";
import {Child} from "file2";

@inject(Child)
export class Home {
    private child: Child;
    constructor(_child: Child) {
        this.child = _child;
        debugger;
    }
}

但是，当我这样做并实例化 Home 时，出现以下错误：

Uncaught SyntaxError: Unexpected token <

连同ERROR [app-router] Router navigation failed, and no previous location could be restored.

现在，第一个错误 Uncaught SyntaxError: Unexpected token < 在第一行给了我对 file1.js 的引用。（奇怪的是，它包含来自应用程序索引的 html 代码）。

现在，如果我从 file3 中取出注射剂并制作如下内容：

//@inject(Child)
export class Home {
    private child: Child;
    constructor() {
        this.child =  new Child(); //here I don't inject, I just 
//instantiate a new object of type Child - still the same error
        debugger;
    }
}

我得到了完全相同的错误，所以它似乎与注入无关。

那么，我怎样才能拥有一个名为 Parent 的基础 class，在一个名为 Child 的 class 中扩展这个 class，然后注入一个实例Child 在另一个 class?

或者我的方法有什么地方不对？

谢谢！

更新：调用 new Child() 这个简单的事实破坏了一切，无论它是在页面加载时调用，在构造函数中调用，还是在按钮上的方法。加载时崩溃

   buttonMethod(){
     var x = new Child();  //it breakes the same way
}

现在，如果我将 Child class 移动到与 Home 和 file3 相同的文件中，则如下所示：

import {inject} from "aurelia-framework";
import {Parent} from "file1";

export class Home {
    child: Child;
    constructor() {
        this.child = new Child();
        debugger;
     }
}


export class Child extends Parent {
    constructor() {
        super();
        debugger;
    }
}

然后我像这样实例化它。但是，当我尝试注入它时，所以：

import {inject} from "aurelia-framework";
import {Parent} from "file1";

@inject(Child)
export class Home {
    child: Child;
    constructor(_child: Child) {
        this.child = _child;
        debugger;
     }
}


export class Child extends Parent {
    constructor() {
        super();
        debugger;
    }
}

我得到：inner error: Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

最后我想把它们放在单独的文件中，但这是让它工作的开始:) 谢谢！

Answer 1

好的，所以 Typescript 编译器找到了 file1，因为它在 .csproj 文件中，所以它不需要完整路径，但是在运行时，Aurelia framework 找到了文件（在转换打字稿代码之后）类似于 localhost/file1.js。所以你有 2 种可能性：在 typings 文件夹中创建一个 tsd.json（假设你使用的是 AMD 模块系统），在其中设置打字稿定义的绝对路径，或者在导入时始终写入完整路径自定义类型。

Aurelia & Typescript 注入和继承

Aurelia & Typescript injection and inheritance

dependency-injection

typescript

aurelia