描述错误
在从SB 7.0升级到SB 7.1后,所有使用隐式渲染的Syncfusion组件故事都不再工作。在渲染函数中有模板的故事仍然可以正常工作(以及我们自己的组件,它们也可以与隐式渲染一起正常工作)。如您在Chromatic构建中看到的:https://www.chromatic.com/build?appId=62eccae33003c44cf082239d&number=1116 ,大多数组件都失败了。请注意,仅在build-storybook上构建失败。start-storybook运行正常,因此本地开发不受影响。
我正在尝试创建一个复现示例,但尚未成功(Storybook + Syncfusion组合设置起来有点困难)。我会继续尝试这个,但在此期间,我将提供一些工作和失败故事的代码片段。
一个典型的Syncfusion组件故事看起来像这样:
import { Meta, StoryObj } from '@storybook/angular';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
const meta: Meta<ButtonComponent> = {
component: ButtonComponent,
title: 'Standard Components/Button'
};
export default meta;
type Story = StoryObj<ButtonComponent>;
export const Button: Story = {
args: {
content: 'Button',
cssClass: 'e-primary'
}
};
请注意,ButtonComponent是一个Syncfusion组件,我们正在隐式渲染。这在SB 7.0中可以正常工作,但在SB 7.1或更高版本中不行。
经过一些尝试,我找到了一些解决方法。
解决方法1:包含模板和moduleMetadata:
export const Button: Story = {
render: (args: any) => ({
props: args,
moduleMetadata: {
declarations: [ButtonComponent]
},
template: `<button ejs-button cssClass='${args['cssClass']}'>${args['content']}</button>`
}),
args: {
content: 'Button',
cssClass: 'e-primary'
}
};
解决方法2:创建一个演示Angular组件(简单的TS和HTML文件)作为 Package 器,然后将其加载到故事中,而不是组件本身,如下所示:
import { Meta, StoryObj } from '@storybook/angular';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { ButtonDemoComponent } from './button-demo.component.ts';
const meta: Meta<ButtonComponent> = {
component: ButtonDemoComponent,
title: 'Standard Components/Button'
};
export default meta;
type Story = StoryObj<ButtonComponent>;
export const Button: Story = {
args: {
content: 'Button',
cssClass: 'e-primary'
}
};
...而HTML文件只包含解决方法1中的模板内容。
解决方法1是我们目前会采用的,但如果能再次使用隐式渲染就太好了,因为它非常方便。同时,我会尝试提供一个复现示例并随时更新这里。如果您需要任何其他信息或文件内容,请告知我。
谢谢!
重现问题
- 无响应*
系统环境
- 无响应*
其他相关信息
- 无响应*
2条答案
按热度按时间bmvo0sr51#
我们在7.1版本中为Angular的Storybook做的一次改变是,在构建storybook时将prod模式默认设置为true。你可以尝试禁用它,看看是否能解决你的问题。参见#23489。
tmb3ates2#
同样的问题也与kendo组件有关。参见#24636
启用/禁用生产模式不会改变这个问题。