Angular Сборник рассказов - ручки и нг-контент - PullRequest
Новая
       1

Angular Сборник рассказов - ручки и нг-контент

3 голосов
/ 31 марта 2020

Я создаю приложение Angular с Storybook. Я хочу, чтобы в моих историях были управляемые ручки, но некоторые из этих компонентов занимают ng-content.

У меня проблемы с тем, чтобы заставить этих двоих работать вместе, потому что из того, что я нашел , передача контента в компонент с помощью Storybook подразумевает установку template для истории. К сожалению, шаблон, кажется, существенно перезаписывает реквизиты Storybook, переданные ручкой.

Вот пример:

button.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'ui-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
  types: String[] = [];

  constructor() {}

  ngOnInit(): void {}

  typeClasses(): String[] {
    return this.types.map(t => `button--${t}`);
  }
}

button.component. html

<a class="button" [ngClass]="typeClasses()">
  <ng-content></ng-content>
</a>

button.component.stories.ts 

import { text, array } from '@storybook/addon-knobs';
import { ButtonComponent } from './button.component';

export default {
  title: 'ButtonComponent'
};

export const dark = () => ({
  moduleMetadata: {
    declarations: [ButtonComponent], // Removed if no template
    imports: []
  },
  // component: ButtonComponent, replaced with the below because of ng-content
  template: `<ui-button>Button content</ui-button>`, // Needed to pass arbitrary child content
  props: {
    types: array('class', ['dark']), // Ignored, because it's not in template
  }
});

Мне не хватает лучшего способа передать контент в? Поскольку я должен дать полный template, кажется, что любые пропуска, не переданные в этом шаблоне, не вводятся в компонент, и поэтому ручки оказываются бесполезными. Похоже, это означает, что я должен просто избавиться от реквизита во всех моих рассказах о компонентах и ​​вместо этого просто пропустить их через шаблон, но это сделало бы их неконфигурируемыми в обслуживаемой сборнике рассказов и проигнорировало бы большую часть сути.

Я делаю это неправильно? Есть ли способ как A) передать контент, так и B) разрешить реквизит? Angular Руководство для сборника рассказов , похоже, не решает эту проблему.

...