Angular 4组件扩展/继承

Question

我正在尝试创建一个Angular 4组件，该组件包含通用框的样式和标记，可以使用自定义行为/内容进行扩展。

到目前为止，我有一个基本组件实现了这样的接口：

export interface Box {
  heading: string;
  icon: string;
  myEventHandler();
}


@Component({
  selector: 'my-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.scss'],
})
export class BoxComponent implements Box {
  public heading: string;
  public icon: string;
  public myEventHandler(){};
}

// box.component.html
<div class="generic-box">
  <header>
    <i class="{{icon}}"></i>
    <h4>{{heading}}</h4>
    <a class="btn btn-primary" (click)="myEventHandler($ev)">
      Btn goes here
    </a>
  </header>

  <div class="box-content">
    <ng-content></ng-content>
  </div>

</div>

^ box.component.html

一个自定义组件，需要是具有一些自定义行为/内容的BoxComponent的实现：

<my-box>
  <p>Content</p>
</my-box>

^定制box.component.html

@Component({
  selector: 'custom-box',
  templateUrl: './custom-box.component.html',
  styleUrls: ['./custom-box.component.scss']
})
export class CustomBox extends BoxComponent {
  heading = 'Custom heading';
  icon = 'icon-name';
  myEventHandler() {
    console.log('bar');
  }
}

我还附上了一个草图，以便更好地理解Box Component模板的外观。

扩展BoxComponent的正确方法是什么？这是Angular方式吗？如果答案是肯定的，我会错过什么，因为它不起作用？