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

Question

我正在使用 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 时没有遇到任何问题，所以我只是为了遵循标准而将一些代码放在这里，所以如果您需要查看其他内容，请告诉我并且我会添加它。有谁知道问题出在哪里？

Answer 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;

现在一切正常:)

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

Child components in Angular not recognized in Storybook while working perfectly fine with ng serve

typescript

angular

storybook