Angular mismo componente diferentes plantillas

29 Jul, 2023 Programación 0

¿Cómo puedo reutilizar un componente con diferente contenido? Tengo un componente <code>quick-links</code> que extiende el componente <code>dashboard-panel</code> y tiene un título y un contenido. Quiero reutilizar ese componente <code>quick-links</code> con diferentes títulos y contenidos.

<dashboard-panel>
    <span class="title">Getting Started</span>
    <div class="content">
        <div class="wrapper">
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-promote">north_east</i>
                    <span>Promote Yourself</span>
                </a>
            </div>
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-pro-page">stars</i>
                    <span>Set Up Pro Page</span>
                </a>
            </div>
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-play">play_arrow</i>
                    <span>Set Up Blaze Player</span>
                </a>
            </div>
            <div class="inner">
                <a href="" target="_blank">
                    <i class="material-icons icon-soundcloud">
                        <img src="assets/img/service-logos/soundcloud.svg" alt="soundcloud" class="">
                    </i>
                    <span>SoundCloud Monetization</span>
                </a>
            </div>
        </div>
    </div>
</dashboard-panel>

Como se muestra en esta captura de pantalla, solo puedo cambiar el título de este componente usando @Input porque es solo una línea, pero ¿qué pasa si también necesito cambiar todo el contenido? ¿Cuál es la mejor manera de lograr eso?

davy.ai

July 29, 2023 at 7:49 am

Para reutilizar el componente quick-links con diferentes títulos y contenidos, puedes crear un componente separado para el contenido y utilizarlo como componente hijo del componente quick-links. Este componente hijo tendrá su propio contenido que puede ser pasado desde el componente padre utilizando el decorador @Input.

Veamos cómo puedes lograrlo:

Crea un componente hijo que contendrá el contenido de quick-links. Llamémoslo quick-links-content. La plantilla de este componente deberá tener la estructura HTML que deseas reutilizar en el componente quick-links.

import { Component, Input } from '@angular/core';

@Component({
 selector: 'app-quick-links-content',
 template: `
   <div class="wrapper">
     <div class="inner">
       <a href="" target="_blank">
         <i class="material-icons icon-promote">north_east</i>
         <span>{{ link1 }}</span>
       </a>
     </div>
     <div class="inner">
       <a href="" target="_blank">
         <i class="material-icons icon-pro-page">stars</i>
         <span>{{ link2 }}</span>
       </a>
     </div>
     <div class="inner">
       <a href="" target="_blank">
         <i class="material-icons icon-play">play_arrow</i>
         <span>{{ link3 }}</span>
       </a>
     </div>
     <div class="inner">
       <a href="" target="_blank">
         <i class="material-icons icon-soundcloud">
           <img src="assets/img/service-logos/soundcloud.svg" alt="soundcloud" class="">
         </i>
         <span>{{ link4 }}</span>
       </a>
     </div>
   </div>
 `,
})
export class QuickLinksContentComponent {
 @Input() link1: string;
 @Input() link2: string;
 @Input() link3: string;
 @Input() link4: string;
}

Utiliza el componente QuickLinksContentComponent en el componente QuickLinks y pasa el contenido como @Input:

import { Component } from '@angular/core';

@Component({
 selector: 'app-quick-links',
 template: `
   <dashboard-panel>
     <span class="title">{{ title }}</span>
     <app-quick-links-content [link1]="link1" [link2]="link2" [link3]="link3" [link4]="link4"></app-quick-links-content>
   </dashboard-panel>
 `,
})
export class QuickLinksComponent {
 title = 'Empezando';
 link1 = 'Promocionarse';
 link2 = 'Configurar Página Pro';
 link3 = 'Configurar Reproductor Blaze';
 link4 = 'Monetización de SoundCloud';
}

Ahora puedes utilizar el componente QuickLinks donde lo necesites en tu aplicación y pasarle diferentes contenidos como @Input. Por ejemplo:
```
<app-quick-links title="Nuevo Título" link1="Nuevo Enlace 1" link2="Nuevo Enlace 2" link3="Nuevo Enlace 3" link4="Nuevo Enlace 4"></app-quick-links>
```
Esto renderizará el componente QuickLinks con el nuevo título y contenido que hayas pasado como @Input.

es.davy.ai

¿Tienes una pregunta?

Angular mismo componente diferentes plantillas

Answer

davy.ai