Angular 中的子组件在 Storybook 中无法识别，而与 ng serve 完美配合

Posted 2023-02-19

【中文标题】Angular 中的子组件在 Storybook 中无法识别，而与 ng serve 完美配合

【英文标题】：Child components in Angular not recognized in Storybook while working perfectly fine with ng serve

【发布时间】：2021-12-04 04:12:41

【问题描述】：

我正在使用 Storybook 在 Angular 中构建一些组件，这些组件到目前为止一直在工作。我刚刚来到一个组件，我在其中嵌套了另一个组件，并且它没有在 Storybook 中迭代。当我查看控制台时，我看到一个错误，告诉我确保将子组件添加到模块中，因为它无法识别它。关于检查我的代码，我挠了挠头，但找不到问题。我决定运行ng serve 并转到localhost://4200 看看会发生什么，一切都按预期工作，没有错误。我查看了 Storybook 网站上的文档，没有看到任何展示处理带有子组件的组件的特殊方法，所以我不明白发生了什么。这是我的一些代码，

子组件的模块

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  BoxSizeVisualizerComponent  from './box-size-visualizer.component';



@NgModule(
  declarations: [BoxSizeVisualizerComponent],
  imports: [
    CommonModule
  ],
  exports:[CommonModule, BoxSizeVisualizerComponent],
  bootstrap:[BoxSizeVisualizerComponent]
)
export class BoxSizeVisualizerModule  

父组件的模块

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  BoxSizeFrameComponent  from './box-size-frame.component';
import  BoxSizeVisualizerModule  from '../box-size-visualizer/box-size-visualizer.module';



@NgModule(
  declarations: [ BoxSizeFrameComponent],
  imports: [
    CommonModule,
    BoxSizeVisualizerModule
  ],
  exports:[CommonModule, BoxSizeVisualizerModule, BoxSizeFrameComponent],
  bootstrap:[BoxSizeFrameComponent]
)
export class BoxSizeFrameModule  

故事档案

import  Meta, Story  from "@storybook/angular/types-6-0";
import  boxSizeParams, boxSizeSize  from "../box-size-visualizer/box-size-visualizer.component";
import  BoxSizeFrameComponent  from "./box-size-frame.component";


export default
    title: 'Demo Frames/Box Size Frame',
    component: BoxSizeFrameComponent
 as Meta;

const Sizes: boxSizeParams[] = [*/a bunch of objects/*]

const Template: Story<BoxSizeFrameComponent> = (args:BoxSizeFrameComponent)=>(props:args);

export const Primary = Template.bind();

Primary.args = (Sizes:Sizes);

正如我之前所说，我在使用 ng serve 时没有任何问题，所以我只是在此处放置一些代码以符合标准，因此如果您需要查看其他内容，请告诉我，我会添加它。有谁知道问题出在哪里？

【参考方案1】：

好的，有些东西告诉我要查看 Storybook 示例组件，我在 Header 中看到他们使用 Button 组件。在 Header 的故事中，我看到他们在默认导出中定义了一个 decorators 数组，如下所示

export default 
  title: 'Example/Header',
  component: Header,
  decorators: [
    moduleMetadata(
      declarations: [Button],
      imports: [CommonModule],
    ),
  ],
 as Meta;

所以我把我的代码修改成了这个

export default
    title: 'Demo Frames/Box Size Frame',
    component: BoxSizeFrameComponent,
    decorators: [
        moduleMetadata(
            imports:[CommonModule, BoxSizeVisualizerModule]
        )
    ]
 as Meta;

现在一切正常:)