각도 4 - 템플릿 상속

Question

나는 다음과 같은 자식 요소를 가지고 있고 그것은 상속 상위 구성 요소입니다 : 이제

@Component({ 
    template: `<p>child</p>` 
}) 
export class EditChildComponent extends EditViewComponent{ 
    constructor(){ 
    super(); 
    } 
} 



@Component({ 
    template: `<p>parent</p>` 
}) 
export class EditViewComponent{ 
    constructor(){ 
    } 
} 

당신이 ng-과 함께 할 것 같은 ChildComponents 템플릿에 EditViewComponent의 템플릿을 배치 할 수있는 방법이 중첩 된 구성 요소의 내용? 이 문서에 대한

<p>parent</p> 
<p>child</p> 

Answer 1

봐 : 어떻게하면 다음과 같은 결과를 얻을 것 Angular 2, decorators and class inheritance

예 : plnkr.co

import {bootstrap} from 'angular2/platform/browser'; 
import { 
    Component, 
    ElementRef, 
    ComponentMetadata 
} from 'angular2/core'; 
import { isPresent } from 'angular2/src/facade/lang'; 

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

    var parentAnnotation = parentAnnotations[0]; 
    Object.keys(parentAnnotation).forEach(key => { 
     if (isPresent(parentAnnotation[key])) { 
     // verify is annotation typeof function 
     if(typeof annotation[key] === 'function'){ 
      annotation[key] = annotation[key].call(this, parentAnnotation[key]); 
     }else if(
     // force override in annotation base 
     !isPresent(annotation[key]) 
     ){ 
      annotation[key] = parentAnnotation[key]; 
     } 
     } 
    }); 

    var metadata = new ComponentMetadata(annotation); 

    Reflect.defineMetadata('annotations', [ metadata ], target); 
    } 
} 

@Component({ 
    // create seletor base for test override property 
    selector: 'master', 
    template: ` 
    <div>Parent component</div> 
    ` 
}) 
export class AbstractComponent { 

} 

@CustomComponent({ 
    // override property annotation 
    //selector: 'sub', 
    // ANSWER: it's not possible like that but you could have a function here. Something like: 
    template: (template) => { return template + 'add html to temlate in child'} 
    selector: (parentSelector) => { return parentSelector + 'sub'} 
}) 
export class SubComponent extends AbstractComponent { 
    constructor() { 
    //console.log(super); 
    } 
} 

@Component({ 
    selector: 'app', 
    // CHECK: change view for teste components 
    template: ` 
    <div> 
     <div><sub>seletor sub not work</sub></div> 
     <div><master>selector master not work</master></div> 
     <div><mastersub>selector mastersub not work</mastersub></div> 
    </div> 
    `, 
    directives [ SubComponent ] 
}) 
export class App { 

    constructor(private elementRef:ElementRef) { 
    } 

} 

bootstrap(App).catch(err => console.error(err));