angular 2 继承自基础组件
angular 2 inheriting from a base-component
我的问题是对这里另一个问题的扩展:
这是我的 plunckr:
http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview
我想做的是:
我有一些共同的功能,我的所有组件都必须使用这些功能。由于在上述问题中已经得到解答,因此可以做到。
我的问题是:我可以在基础组件中注入依赖项吗?在我的 plunkr 中,声明的依赖项 (FormBuilder
) 在登录到控制台时未定义。
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 {
}
不可能像您那样做,因为 Angular2 只会查看当前组件的注释,而不会查看上方组件的注释。
话虽如此,您可以在注解级别工作,以继承父组件的注解:
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);
}
}
并像这样使用它:
@Inherit()
@Component({
(...)
})
export class ChildComponent1 extends BaseComponent {
constructor() {
super(arguments);
}
}
有关详细信息,请参阅此问题:
以下文章可能会让您感兴趣,了解幕后发生的事情:
您还需要注意,直接处理注释有缺点,尤其是在离线编译和 IDE 中的组件自检方面。
我的问题是对这里另一个问题的扩展:
这是我的 plunckr: http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview
我想做的是:
我有一些共同的功能,我的所有组件都必须使用这些功能。由于在上述问题中已经得到解答,因此可以做到。
我的问题是:我可以在基础组件中注入依赖项吗?在我的 plunkr 中,声明的依赖项 (FormBuilder
) 在登录到控制台时未定义。
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 {
}
不可能像您那样做,因为 Angular2 只会查看当前组件的注释,而不会查看上方组件的注释。
话虽如此,您可以在注解级别工作,以继承父组件的注解:
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);
}
}
并像这样使用它:
@Inherit()
@Component({
(...)
})
export class ChildComponent1 extends BaseComponent {
constructor() {
super(arguments);
}
}
有关详细信息,请参阅此问题:
以下文章可能会让您感兴趣,了解幕后发生的事情:
您还需要注意,直接处理注释有缺点,尤其是在离线编译和 IDE 中的组件自检方面。