angular - 如何将指令添加到角度故事书

Question

我有一个下拉指令，我想将它添加到我的故事书中，但它不起作用。当我运行故事书上的按钮时，但如果我单击按钮，则不会显示模板。

import {moduleMetadata} from '@storybook/angular';
import {CommonModule} from '@angular/common';
import {DropdownModule} from '../../app/base-components/dropdown';

export default {
  title: 'dropdown',
  decorators: [
    moduleMetadata({
      declarations: [],
      imports: [CommonModule, DropdownModule]
    })
  ]
};

export const withDropdownTemplate = () => ({
  template: '<button dropDown></button>',
  props: {
    displayTpl: `<ng-template #dropdownTpl>
  <ul>
    Hello World
  </ul>
</ng-template>`
  }
});

Answer 1

我有同样的问题。

我的解决方案： https ://github.com/AnteaterCode/shatilokit/blob/master/src/stories/general/buttons.stories.ts

const modules = {
  imports: [
    ShButtonModule,
  ],
};

export default {
  title: 'general/Button',
  component: ShButton
} as Meta;


export const primary = () => ({
  moduleMetadata: modules,
  template: `
    <button shButton> Button </button>
  `,
});