扩展 Angular Material2 MdTab 组件

Question

我正在尝试扩展材料组件之一，即 MdTabGroup。开箱即用的 MdTabGroup 组件一切正常 - 材料库已正确导入模块等。

这是扩展组件：

@Component({
    selector: 'md-custom-tab-group',
    templateUrl: 'custom-tab-group.html',
    ....
})
export class MdCustomTabGroup extends MdTabGroup {
  constructor( private _r : Renderer) {
    super(_r);
  }
}

新组件被导入并在应用模块中声明，并创建如下：

<md-custom-tab-group>
    <md-tab>one</md-tab>
    <md-tab>two</md-tab>
</md-custom-tab-group>

自定义标签组 (custom-tab-group.html) 的模板与材料中的模板相同，例如

<div class="mat-tab-body-wrapper" #tabBodyWrapper>
    <md-tab-body role="tabpanel"
                 *ngFor="let tab of _tabs; let i = index"
                 ...
                 [content]="tab.content"
                 ...>
    </md-tab-body>
</div>

运行时，_tabs ViewChildren 集合被正确填充 - 它由原始标记中的 md-tab 声明组成，被解释为材质选项卡组件。但是，custom-tab-group.html 模板无效。模板解析器现在不知道“md-tab-body”是什么。

具体来说——

无法绑定到“内容”，因为它不是“md-tab-body”的已知属性。

但我认为它在选择新模板时根本不知道 md-tab-body 是什么。

问题是 - 我怎样才能纠正这种行为并让扩展组件正常工作？

Answer 1

不是一个好的答案，但正在跟踪的这个问题似乎是它的根源。

https://github.com/angular/material2/issues/9216

一旦它们在导出列表中包含 MatTabBody、MatTabHeader 和 MatTabLabelWrapper，您应该能够对其进行扩展。