如何将TemplateRef作为@Input参数传递给Story

TemplateRef是Angular运行时生成的实例对象，不能直接传入模板引用变量的字符串名来赋值，以下是两种可行的实现方式：

方案1：直接在Story模板内绑定（最常用） #

直接在Story的模板中同时定义ng-template和目标组件，把模板引用变量直接绑定到组件的value输入参数即可，不需要通过args传递value：

export const TemplateRefStory: Story<TestComponent> = (args) => ({
  template: `
    <!-- 定义你要传入的模板 -->
    <ng-template #hello>你要展示的模板内容</ng-template>
    <!-- 直接把模板引用变量绑定到value参数，其他输入参数照常从args取 -->
    <test [value]="hello" [其他输入参数]="args.其他参数名"></test>
  `,
  props: args,
});

// 其他输入参数照常放在args里即可
TemplateRefStory.args = {
  // 不需要写value字段
  其他参数名: '参数值'
};

如果需要支持在Storybook控制面板调整模板内容，可以额外加自定义参数：

export const TemplateRefStory: Story<TestComponent> = (args) => ({
  template: `
    <ng-template #hello>{{templateContent}}</ng-template>
    <test [value]="hello"></test>
  `,
  props: args,
});

TemplateRefStory.args = {
  templateContent: '自定义模板文本'
};

方案2：多模板切换场景 #

如果需要支持在控制面板切换不同的模板，可以按如下方式实现：

// 先定义所有可选模板
const templateOptions = {
  文本模板: `<ng-template #textTpl>纯文本内容</ng-template>`,
  按钮模板: `<ng-template #btnTpl><button type="button">操作按钮</button></ng-template>`,
  空模板: `<ng-template #emptyTpl></ng-template>`
}

export const TemplateRefStory: Story<TestComponent> = (args) => ({
  template: `
    ${Object.values(templateOptions).join('')}
    <test 
      [value]="args.selectedTemplate === '文本模板' ? textTpl : args.selectedTemplate === '按钮模板' ? btnTpl : emptyTpl"
    ></test>
  `,
  props: { args }
});

TemplateRefStory.args = {
  selectedTemplate: '文本模板'
};

// 给模板选择器配置下拉控件
TemplateRefStory.argTypes = {
  selectedTemplate: {
    control: { type: 'select', options: Object.keys(templateOptions) },
    name: '选择传入的模板'
  }
}

内容的提问来源于stack exchange，提问作者Snæbjørn