无法解析扩展组件的所有参数

Question

我在 angular 6 中有一个简单的 BaseComponent，它有 one 参数。其他组件继承自 BaseComponent.

@Component({
    selector: 'base-component',
    template: ``
})
export class BaseComponent
{
    constructor(private type: number)
    {
        console.log("type value is " , type);
    }
}

和HomeComponent是：

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent extends BaseComponent implements OnDestroy 
{
    constructor() 
    {
        super(1); //simple number
    }
    ngOnDestroy() { }
}

它是用 ng b --watch 编译的，但是当我执行 ng b --prod 时，我遇到了这个错误：

ERROR in : Can't resolve all parameters for BaseComponent in E:/app/src/app/win-forms/base.component.ts: (?).

当我从 constructor 中删除 type 参数时，它是 build 好。

如何使用 constractor 和简单的 parameter?

非常感谢任何帮助。

Answer 1

将 BaseComponent 标记为抽象，因此不能直接实例化它，也不能删除 @Component 属性。

// ← removed @Component attribute
export abstract class BaseComponent {
  /* unchanged code removed for brevity */
}

错误的原因是目前您可以在某处使用选择器base-component，而angular框架不知道要注入什么number 类型的构造函数尚未在 DI 框架中注册。

如果您必须能够直接创建它的一个实例，并且您在某处有一个静态值需要传递给它，那么您需要使用 InjectionToken 向 angular 注册它.

示例：

/* I have omitted a lot of "standard" code for brevity that is not of interest for the purpose of this example */

import { InjectionToken, Inject } from '@angular/core';


export const YOUR_STATIC_VALUE_TOKEN = new InjectionToken<number>('SomeNumber');

export function someNumberFactory(): any {
    return 18; // return the value you want to hard code
}

@NgModule({
    providers: [{ provide: YOUR_STATIC_VALUE_TOKEN, useFactory: someNumberFactory}]
})
export class YourModule { }

export abstract class BaseComponent {
  constructor(@Inject(YOUR_STATIC_VALUE_TOKEN) private type: number) {}
}

无法解析扩展组件的所有参数

Can't resolve all parameters for extends component

typescript

angular

angular6