es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo actualizar Angular Storybook para obtener el ejemplo de código fuente correcto?

01 Aug, 2023 Programación

Tengo un componente que se muestra así:

     <app-content-tabs>

        <app-tab tabTitle="Información de la solicitud">contenido de la pestaña 1</app-tab>

        <app-tab tabTitle="Detalles del asunto">contenido de la pestaña 2</app-tab>

     </app-content-tabs>

También tengo un story para el componente:

import {ContentTabsComponent} from "../../../../app/components/ui/content-tabs/content-tabs.component";

import {ContentTabsModule} from "../../../../app/components/ui/content-tabs/content-tabs.module";

import {Meta, Story} from "@storybook/angular/types-6-0";

import {moduleMetadata} from "@storybook/angular";



export default  {

  component: ContentTabsComponent,

  decorators: [

    moduleMetadata({

      declarations: [ ],

      imports: [ContentTabsModule ],

      providers: []

    })],

  title: 'Componentes/ui/content-tabs',

} as Meta



const Template: Story<ContentTabsComponent> = (args: ContentTabsComponent) => ({

  props: args,

  template: `

  <div style="width: 256px;height: 698px">

  <app-content-tabs>

    <app-tab tabTitle="Información de la solicitud">contenido de la pestaña 1</app-tab>

    <app-tab tabTitle="Detalles del asunto">contenido de la pestaña 2</app-tab>

   </app-content-tabs>

</div>

  `

});



export const EjemploTabs = Template.bind({});

El problema está en la aplicación web de Storybook cuando voy a la documentación del componente y copio el código fuente, solo genera esto:

<app-content-tabs></app-content-tabs>

¿Cómo puedo solucionar el código fuente para mostrar el ejemplo completo con el código proyectado en ng-content?

He intentado buscar en la documentación de Storybook pero sin suerte.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema es que el código fuente generado por la documentación de Storybook solo incluye las etiquetas más externas del componente (<app-content-tabs></app-content-tabs>), pero no el contenido proyectado dentro (<app-tab></app-tab>).

    Para solucionarlo, puedes intentar agregar la siguiente línea a tu clase ContentTabsComponent:

    @ContentChildren(TabComponent) tabs: QueryList<tabcomponent>;

    Esto te permitirá acceder a los hijos TabComponent de ContentTabsComponent y incluirlos en el código fuente generado por Storybook.

    Luego, en tu plantilla de Storybook, puedes iterar sobre la lista de consultas tabs y mostrar su contenido:

    const Template: Story<contenttabscomponent> = (args: ContentTabsComponent) => ({
  props: args,
  template: `
    <div style="width: 256px;height: 698px">
      <app-content-tabs>
        <ng-container *ngfor="let tab of tabs">
          <app-tab tabtitle="{{ tab.title }}">
            {{ tab.content }}
          </app-tab>
        </ng-container>
      </app-content-tabs>
    </div>
  `
});

    Ten en cuenta que esto asume que tienes un TabComponent con las propiedades title y content que corresponden al atributo tabTitle y al contenido interno, respectivamente. Es posible que necesites ajustar este código para que se ajuste a tu implementación específica.

    ¡Espero que esto ayude!

Comments are closed.