如何给一个' TemplateRef '作为一个' @Input '参数的故事?

Question

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

TestComponent

@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