如何将“TemplateRef”作为“@Input”参数提供给故事？

Question

我正在尝试制作一个使用将 a 作为 的组件的TemplateRef故事@Input。但我不知道怎么做。

测试组件

@Component({
  selector: 'test',
  templateUrl: './test.component.html',
})
export class TestComponent {
  @Input() public set value(value: TemplateRef<void>) {
    // ...
  }
}

故事

export default {
  title: 'Components/Test',
  component: TestComponent,
} as Meta;

const Template: Story<TestComponent> = (args) => ({
  props: args,
});

export const TemplateRefStory = Template.bind({});
TemplateRefStory.args = {
  value: ???, // <-- what do I put here?
};

我尝试了多种方法，它们与下面的类似。这确实没有意义。

export const TemplateRef: Story<TestComponent> = (args) => ({
  template: `<ng-template #hello>Hello</ng-template>`,
  props: args,
});

TemplateRef.args = {
  value: '#hello',
};

Answer 1

我遵循了这样的方法并且有效

   export default {
    title: 'StepperComponent',
    component: StepperComponent,
    decorators: [
      moduleMetadata({
        imports: [
          CommonModule,
          BrowserAnimationsModule,
          MaterialModule
        ],
      })
    ],
  } as Meta<StepperComponent>;
  
  const actionsData = {
    checked: action('checked change: '),
  
  };



 export const Template: Story = (args) => ({
    props: {
      ...args
    },
    template: `

      <app-stepper 
        [steps]="[{stepName: 'Connectivity Type', stepTemplate: step1Template}, {stepName: 'Database Authentication', stepTemplate: step2Template}]">
      </app-stepper>

      <ng-template #step1Template>
        <div>Step 1</div>
      </ng-template>
      <ng-template #step2Template>
        <div>Step 2</div>
      </ng-template>
    `
  });

在这里，我在故事模板中定义了我需要的元素。我假设您也可以在 ng-template 标签中包含组件。

  <ng-template #step2Template>
    <cmp-test></cmp-test>
  </ng-template>

不要忘记添加BrowserAnimationsModule