Angular 的 Storybook 不显示由 Kendo UI 创建的元素

Posted 2023-02-19

【中文标题】Angular 的 Storybook 不显示由 Kendo UI 创建的元素

【英文标题】：Storybook for Angular not displaying elements created by Kendo UI

【发布时间】：2021-12-04 00:20:02

【问题描述】：

我正在尝试将 Storybook 用于 Angular 项目。 Angular 项目在整个组件模板中使用了 Kendo UI 的剑道网格元素。

问题是当我运行它时，使用 kendo 元素的任何组件模板都不会显示在 Storybook 界面中。如果我更改为标准 html 元素，数据会按预期显示。

我的哪些设置不正确导致这些自定义元素无法在 Storybook 中显示？

我们将不胜感激任何帮助或想法，并很乐意为任何事情提供更多背景信息。下面是一些代码示例。

版本 @angular/core - ^12.1.0 @progress/kendo-angular-grid - ^5.4.0 @storybook/angular - ^6.3.4

.storybook/main.js 文件

module.exports = 
  "stories": [
    "../src/**/*.story.mdx",
    "../src/**/*.story.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  "core": 
    "builder": "webpack5"
  

组件故事

import  HttpClientModule  from '@angular/common/http';
import  CUSTOM_ELEMENTS_SCHEMA  from '@angular/core';
import  RouterTestingModule  from '@angular/router/testing';
import  moduleMetadata  from '@storybook/angular';
import  Story, Meta  from '@storybook/angular/types-6-0';
import DocumentsComponent from './documents.component';

export default 
  title: 'Components/Pages/Documents',
  component: DocumentsComponent,
  argTypes: ,
  decorators: [
    moduleMetadata(
      imports: [HttpClientModule, RouterTestingModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    ),
  ],
 as Meta;

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

export const DocumentsList = Template.bind();

组件模板文件

<div class="documents">
  <button kendoButton (click)="addNew()" class="add-new" icon="plus" look="flat">Add New</button>
  <h1>Documents</h1>


  <!-- start block added to confirm data was available when rendering -->
  <div *ngFor="let data of gridData">
    <h2>data.id</h2>
  </div>
  <!-- end block added to confirm data was available when rendering -->


  <kendo-grid
    [data]="gridData"
    [sort]="sort"
    [sortable]=" allowUnsort: true, mode: 'multiple' "
    (sortChange)="sortChange($event)"
  >
    <kendo-grid-column field="id" title="ID" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="assignee.username" title="Assignee" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="status" title="Status" [width]="120">
...

【参考方案1】：

Telerik 论坛的管理员帮我解决了这个问题。我的故事文件中缺少几个导入；特别是 GridComponent。

我遇到了 i18n 错误，将此行导入 preview.js 文件解决了它：

import '@angular/localize/init';