Angular 添加注释时，basecomponent的角度依赖项注入失败

扩展基类时，如果主组件在组件声明之后有注释，则基类不会正确注入依赖项。我昨晚在我的一个主要项目中遇到了这个问题，并通过以下步骤重现了它：

使用VS代码，创建一个新的角度项目（我使用了ng新测试应用程序--routing）

创建“appComponentBase.component.ts”（代码如下）

import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { TestService } from "./test.service";
@Component({
    selector: 'AppComponentBase',
    template: ``,
})

export class AppComponentBase {


    constructor(testService: TestService)
    {
        console.log(testService.serviceMessage);
    }
}

创建“test.service.ts”（代码如下）

import { Injectable } from "@angular/core";

@Injectable({
    providedIn: 'root'
  })
  export class TestService {

    public serviceMessage =  "I'm here!";

    constructor()
    {
    }
  }

test.service.ts

import { Injectable } from "@angular/core";

@Injectable({
    providedIn: 'root'
  })
  export class TestService {

    public serviceMessage =  "I'm here!";

    constructor()
    {
    }
  }

appComponentBase.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import { TestService } from "./test.service";
@Component({
    selector: 'AppComponentBase',
    template: ``,
})

export class AppComponentBase {


    constructor(testService: TestService)
    {
        console.log(testService.serviceMessage);
    }
}

app.component.ts

import { Component } from '@angular/core';
import { AppComponentBase } from './appComponentBase.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent extends AppComponentBase {
  /* Declarations */

  title = 'test-app';
}

这些是我对生成的测试应用程序所做的唯一更改

当我运行此（

npm start

）时，我得到“无法读取未定义的属性'serviceMessage'。这是因为使用此代码设置时，TestService未正确注入

删除/*声明*/注释时，不会发生此错误

我无法在stackblitz上重现这一点，我相信他们可能正在预处理一些代码

---

有人能告诉我为什么该注释会阻止基类的依赖注入吗？

那么您的

basecomponent

需要构造函数中的

TestService

。你没有提供它

这：

几乎等于：

export class AppComponent extends AppComponentBase {
    title = 'test-app';
    constructor(){
        super();
    }
} 

这显然是行不通的。然而，这将：

export class AppComponent extends AppComponentBase {
    title = 'test-app';
    constructor(testService: TestService){
        super(testService);
    }
} 

编辑

上述解释并不完全正确。在typescript中，构造函数是向下传递的

class A{
    constructor(val: string){
        console.log(val);
    }
}

class B extends A{

}

const a: A = new B('as');

但是，angular DI框架要求您显式地声明依赖关系。因此，从typescript/javascript的角度来看，代码是有效的。不过，angular也有一些问题

编写从另一个组件继承的组件时要小心。如果基组件已注入依赖项，则必须在派生类中重新提供和注入依赖项，然后通过构造函数将它们传递给基类

---

嗯，真奇怪。如果您将注释保留在原来的位置，但在

title

下面放置一个调用

super（）

的构造函数，会发生什么情况？这是有效的。就像没有基类的构造函数一样。我也可以移动评论，这样在它和标题之间就不会有断行（在上面的一行上，但没有空格），它就可以工作了。我猜这是一些奇怪的预处理，但非常奇怪。我完全同意。我只是成功了，工作了。是您提出问题时的

*/Declarations*/

，还是您在代码中显示的

*/

（

*/

vs

/*

）？。我的数据：angular devkit/core:11.0.7，angular cli:11.0.7，rxjs 6.6.7，typescript 4.0.7：（正如代码中所示。你能用复制给该组件的准确代码提供答案吗？基础组件有自己的构造函数，因此提供TestService本身。我不知道父组件必须向基础类提供依赖项注入，这正是继承的工作方式.无论是java、c#还是typescript。依赖注入这一事实不会改变任何事情。好吧……你尝试过重新创建它吗？我怀疑你的“继承就是这样工作的”位，因为我可以在我的应用程序组件中使用依赖项注入对象，而无需在我的应用程序组件中指定构造函数。@RobinDijkhof我不同意“相等”当您不向派生类提供构造函数时，它隐式地拥有基类的构造函数。因此DI正在工作。显然，codegen存在一些问题，因为添加注释会破坏隐式类injection@Sergey这正是我在编辑中所说的。