Angular 4 - 模板继承

Question

我有以下子组件，它是继承父组件：

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



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

现在有什么方法可以将 EditViewComponent 的模板放在 ChildComponents 模板中，就像在嵌套组件中使用 ng-content 一样？我将如何得到以下结果：

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

Answer 1

目前 Angular 不提供此功能。 但是您可以使用“Narik”在 Angular 中应用“UI 继承”。

https://docs.narik.me/04.-ui-inheritance

Answer 2

看看这篇文章： 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));