无法解析extends component的所有参数。

Question

我有一个简单的 BaseComponent 在 angular 6 该 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 .E:apprcappwin-formsbase.component.ts: Can't resolve all parameters for BaseComponent in: 无法解析E:apprcappwin-formsbase.component.ts中BaseComponent的所有参数。(?).

当我删除 type 参数从 constructor ，它是 build 以及。

如何使用 constractor 简单的 parameter?

任何帮助是非常感激的。

Answer 1

标记 BaseComponent 作为抽象的，所以它不能直接被实例化，同时也删除了 @Component 属性。

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

出错的原因是，当前您 可以 使用选择器 base-component 某个地方，而Angular框架将不知道该把什么注入到构造函数中，作为类型的 number 还没有在DI框架中注册。

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

例如：

/* 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) {}
}