当前位置: 动力学知识库 > 问答 > 编程问答 >

typescript - angular 2 inheriting from a base-component

问题描述:

My question is an extension to another question here on so: Angular2 and class inheritance support

And here is my plunckr:

http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview

What I am trying to do is the following:

I have some common functionallity whcih all of my components will have to use. As it already has been answered in the aforementioned question, this can be done.

My question is: Can I have dependencies injected in the base-component? In my plunkr the declared dependency (FormBuilder) is undefined when logged to console.

import {AfterContentChecked, Component, ContentChildren, Input, QueryList, forwardRef, provide, Inject} from '@angular/core';

import { FormGroup, FormControl, Validators, FormBuilder, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';

@Component({

providers: [FormBuilder]

})

export class BaseComponent {

// Interesting stuff here

@Input() id: string;

constructor(formBuilder: FormBuilder){

console.log(formBuilder);

console.log('inside the constructor');

}

}

@Component({

selector: 'child-comp2',

template: '<div>child component #2 ({{id}})</div>',

providers: [provide(BaseComponent, { useExisting: forwardRef(() => ChildComponent2) })]

})

export class ChildComponent2 extends BaseComponent {

}

@Component({

selector: 'child-comp1',

template: '<div>child component #1 ({{id}})</div>',

providers: [provide(BaseComponent, { useExisting: forwardRef(() => ChildComponent1) })]

})

export class ChildComponent1 extends BaseComponent {

}

@Component({

selector: 'parent-comp',

template: `<div>Hello World</div>

<p>Number of Child Component 1 items: {{numComp1}}

<p>Number of Child Component 2 items: {{numComp2}}

<p>Number of Base Component items: {{numBase}}

<p><ng-content></ng-content>

<p>Base Components:</p>

<ul>

<li *ngFor="let c of contentBase">{{c.id}}</li>

</ul>

`

})

export class ParentComponent implements AfterContentChecked {

@ContentChildren(ChildComponent1) contentChild1: QueryList<ChildComponent1>

@ContentChildren(ChildComponent2) contentChild2: QueryList<ChildComponent2>

@ContentChildren(BaseComponent) contentBase: QueryList<BaseComponent>

public numComp1:number

public numComp2:number

public numBase:number

ngAfterContentChecked() {

this.numComp1 = this.contentChild1.length

this.numComp2 = this.contentChild2.length

this.numBase = this.contentBase.length

}

}

@Component({

selector: 'my-app',

template: `<parent-comp>

<child-comp1 id="A"></child-comp1>

<child-comp1 id="B"></child-comp1>

<child-comp2 id="C"></child-comp2>

</parent-comp>

`,

directives: [ParentComponent, ChildComponent1, ChildComponent2]

})

export class MyApplication {

}

网友答案:

It's not possible the way you do since Angular2 will only have a look at the annotations for the current component but not on the component above.

That being said, you can work at the level of annotations to make inherit annotations of the parent component:

export function Inherit(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('design:paramtypes', parentTarget);

    Reflect.defineMetadata('design:paramtypes', parentAnnotations, target);
  }
}

And use it like this:

@Inherit()
@Component({
  (...)
})
export class ChildComponent1 extends BaseComponent {
  constructor() {
    super(arguments);
  }
}

See this question for more details:

  • Angular2 use imported libs from base class

The following article could interest you to understand what happens under the hood:

  • https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.mrhhol5p7

You also need to be aware that working on annotations directly has drawbacks especially regarding offline compilation and for component introspection in IDEs.

分享给朋友:
您可能感兴趣的文章:
随机阅读: