góc 2 kế thừa từ một cơ sở thành phần

Question

Câu hỏi của tôi là một phần mở rộng cho câu hỏi khác ở đây trên vậy: Angular2 and class inheritance support

Và đây là plunckr tôi: http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview

Những gì tôi đang cố gắng làm là như sau:

Tôi có một số chức năng phổ biến mà tất cả các thành phần của tôi sẽ phải sử dụng. Vì nó đã được trả lời trong câu hỏi nói trên, điều này có thể được thực hiện.

Câu hỏi của tôi là: Tôi có thể chèn phụ thuộc vào thành phần cơ sở không? Trong plunkr của tôi phụ thuộc khai báo (FormBuilder) là không xác định khi đăng nhập vào giao diện điều khiển.

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 { 

} 

Answer 1

Không thể thực hiện theo cách bạn làm vì Angular2 sẽ chỉ xem xét chú thích cho thành phần hiện tại chứ không phải ở thành phần bên trên.

đó đang được nói, bạn có thể làm việc ở cấp độ của các chú thích để làm cho các chú thích kế thừa của thành phần cha mẹ:

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); 
    } 
} 

Và sử dụng nó như thế này:

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

Xem câu hỏi này để biết thêm chi tiết:

• Angular2 use imported libs from base class

Bài viết sau đây có thể bạn quan tâm để hiểu những gì xảy ra dưới mui xe:

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

Bạn cũng cần phải lưu ý rằng làm việc trên chú thích trực tiếp có nhược điểm đặc biệt liên quan đến biên soạn ẩn và cho thành phần introspection trong IDE.