英文:
Rendering Angular standalone Angular Material select components with Storybook?
问题
尝试使用Storybook呈现自定义的独立Angular Material选择组件。
它产生了以下错误：
- 在您的应用程序中导入了`BrowserAnimationsModule`或`NoopAnimationsModule`。
- 在`@Component`装饰器的`animations`字段中定义了名为`@transitionMessages`的动画的相应配置（请参见https://angular.io/api/core/Component#animations）。
在检查NoSyntheticProp时出现（platform-browser.mjs:659:1）
在NoneEncapsulationDomRenderer.setProperty时出现（platform-browser.mjs:642:1）
在elementPropertyInternal时出现（core.mjs:10801:1）
在Module.ɵɵproperty时出现（core.mjs:13521:1）
在MatFormField_div_17_Template时出现（form-field.mjs:26:1）
在执行模板时出现（core.mjs:10441:1）
在刷新视图时出现（core.mjs:10326:1）
在刷新嵌入式视图时出现（core.mjs:11339:1）
在刷新视图时出现（core.mjs:10350:1）
在刷新组件时出现（core.mjs:11385:1）
这是因为组件是独立的，所以应该使用独立API包含BrowserAnimationsModule，就像这样：
providers: [provideRouter(routes), provideAnimations(), provideHttpClient()],
});
然而，Storybook正在引导应用程序，所以如何调用provideAnimations()？
英文:
Trying to render a custom standalone Angular Material select component with Storybook.
It produces the error:
ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:
- Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
- There is corresponding configuration for the animation named `@transitionMessages` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).
at checkNoSyntheticProp (platform-browser.mjs:659:1)
at NoneEncapsulationDomRenderer.setProperty (platform-browser.mjs:642:1)
at elementPropertyInternal (core.mjs:10801:1)
at Module.ɵɵproperty (core.mjs:13521:1)
at MatFormField_div_17_Template (form-field.mjs:26:1)
at executeTemplate (core.mjs:10441:1)
at refreshView (core.mjs:10326:1)
at refreshEmbeddedViews (core.mjs:11339:1)
at refreshView (core.mjs:10350:1)
at refreshComponent (core.mjs:11385:1)
And this is something that happens because the component is standalone, and so the BrowserAnimationsModule should be included using the standalone API like this:
bootstrapApplication(AppComponent, {
providers: [provideRouter(routes), provideAnimations(), provideHttpClient()],
});
However Storybook is bootstrapping the application, so how would be go about calling provideAnimations()?
答案1
得分: 5
请看以下示例，了解在哪里添加提供程序：
import { Meta, applicationConfig } from '@storybook/angular';
import { ProjectsTableComponent } from './projects-table.component';
import { provideAnimations } from '@angular/platform-browser/animations';
export default {
title: 'Presentational/Admin/Projects Table',
component: ProjectsTableComponent,
decorators: [
applicationConfig({
providers: [provideAnimations()],
}),
],
} as Meta<ProjectsTableComponent>;
export const WithData = {
render: (args: ProjectsTableComponent) => ({
props: args,
}),
args: {
projects: getProjectsData(),
},
};
在上述代码中，decorators 部分是用来添加提供程序的示例。
英文:
See decorators and applicationConfig below as an example of where to add providers:
import { Meta, applicationConfig } from '@storybook/angular';
import { ProjectsTableComponent } from './projects-table.component';
import { provideAnimations } from '@angular/platform-browser/animations';
export default {
title: 'Presentational/Admin/Projects Table',
component: ProjectsTableComponent,
decorators: [
applicationConfig({
providers: [provideAnimations()],
}),
],
} as Meta<ProjectsTableComponent>;
export const WithData = {
render: (args: ProjectsTableComponent) => ({
props: args,
}),
args: {
projects: getProjectsData(),
},
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论