Búsqueda de sitios web

typescript - herencia de componentes en angular 4 y "extender vista"


Cuando haces herencia de componentes en Angular como

export class ChildComponent extends ParentComponent{}

Puedes obtener toda la lógica del ComponentePadre, pero tienes que implementar todo el HTML de nuevo.

Supongamos que el HTML de mi ParentComponent se ve así

<div class="card">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
</div>

¿Hay alguna manera de que pueda "implementar" el componente padre donde la vista del componente hijo implemente solo el div de "contenido"?

por ejemplo

@Component({
   template:`<div class="content-of-child">...</div>`
})
 export class ChildComponent extends ParentComponent{}

para que el resultado sea

<div class="card">
        <div class="header"></div>
        <div class="content-of-child"></div>
        <div class="footer"></div>
    </div>

Respuesta #1

No, no puedes hacerlo así, pero lo que sí puedes hacer es dividir tu componente principal en 3 componentes y extender solo el componente 'content'. Pero, de nuevo, necesitarás crear un nuevo componente principal donde insertarás el componente extendido.

Artículos relacionados