angular - 如何在 Storybook.js 故事中使用角度嵌入

Question

有没有办法为 Angular 组件编写故事书故事，以便将内部 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

您的代码运行良好。笨蛋。

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

<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>

请参考此答案并查看其中的演示以更好地理解