¿Cómo actualizar Angular Storybook para obtener el ejemplo de código fuente correcto?
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.
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
:Esto te permitirá acceder a los hijos
TabComponent
deContentTabsComponent
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:Ten en cuenta que esto asume que tienes un
TabComponent
con las propiedadestitle
ycontent
que corresponden al atributotabTitle
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!