Question

有没有办法为角度组件编写故事书故事，以便在渲染的故事书中将内部html /文本转换成？

这里我的尝试是在没有测试

的被转换的内部文本的情况下呈现的

按钮组件：

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

@Component({
  selector: 'open-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.scss']
})
export class ButtonComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

按钮组件模板：

<button type="button">
  <ng-content></ng-content>
</button>

故事：

storiesOf('Button', module)
  .add('Basic Button', () => ({
      component: ButtonComponent,
      template:
      `
        <open-button class="primary" type="button">testing</open-button>
      `,
  }));

呈现为：

<open-button _nghost-c8="">
<button _ngcontent-c8="" type="button"> 
</button>
</open-button>

Answer 1

您的代码完美无缺。 Plunker

考虑添加选择器以获得更好的内容投影，如下所示

<button type="button">
  <ng-content select=".button-body"></ng-content>
</button>

您的story-component应该使用button-body作为类来将内容投影到子组件，如下所示

<open-button _nghost-c8="">
   <div class="button-body"> <!-----Projecting using this selector------>
      <button _ngcontent-c8="" type="button"> </button>
   </div>
</open-button>

请参阅此 answer 并查看其中的演示以便更好地了解

如何在Storybook.js故事中使用角度转换

1 个答案:

您的代码完美无缺。 Plunker