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

【问题标题】：Storybook for Angular not displaying elements created by Kendo UIAngular 的 Storybook 不显示由 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">
...

【问题讨论】：

标签： angular kendo-ui storybook kendo-ui-angular2 angular-storybook

【解决方案1】：

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

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

import '@angular/localize/init';

【讨论】：