Tengo el siguiente componente secundario y su componente principal de herencia:
@Component({ template: `<p>child</p>` }) export class EditChildComponent extends EditViewComponent{ constructor(){ super(); } } @Component({ template: `<p>parent</p>` }) export class EditViewComponent{ constructor(){ } }Ahora, ¿hay alguna forma de colocar la plantilla de EditViewComponent en la plantilla de ChildComponents como lo haría con ng-content en componentes anidados? ¿Cómo obtendría el siguiente resultado:
<p>parent</p> <p>child</p>Actualmente Angular no proporciona esta característica. Pero puede usar "Narik" para aplicar "Herencia de interfaz de usuario" en angular.
Mira este artículo: Angular 2, decoradores y herencia de clases
Ejemplo: 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));