英文:
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(),},};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论