Estoy intentando extender uno de los componentes de Material, MdTabGroup. Todo funciona bien con el componente MdTabGroup listo para usar: la biblioteca de materiales se importa correctamente al módulo, etc.

Aquí está el componente extendido:

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

El nuevo componente se importa y se declara en el módulo de la aplicación, y se crea así:

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

La plantilla para el grupo de pestañas personalizadas ( custom-tab-group.html ) es idéntica a la del material, por ejemplo

 <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>

Cuando se ejecuta, la colección _tabs ViewChildren se completa correctamente: consta de las declaraciones md-tab en el marcado original, interpretadas como un componente de la pestaña Material. Sin embargo, la plantilla custom-tab-group.html no es válida. El analizador de plantillas ahora no sabe qué es 'md-tab-body'.

Específicamente -

No se puede vincular a 'contenido' ya que no es una propiedad conocida de 'md-tab-body'.

pero no creo que sepa qué es md-tab-body en absoluto cuando toma la nueva plantilla.

La pregunta es: ¿cómo puedo corregir este comportamiento y hacer que funcione el componente extendido?