1

我正在尝试在 Storybook 中设置我的第一个组件。我能找到的所有示例都将整个 HTML 模板放在@Component({template: '...'})装饰器中，这样就可以了。但是，当我在 Angular 组件中使用模板的相对路径时，@Component({templateUrl: './<template path>'})会出现下面列出的错误。

我的目标是使用templateUrl而不是template因为我至少有一些具有重要 HTML 的组件。

错误

  • GET http://localhost:6006/refresh-button.component.html 404（未找到）
  • zone.js:1102 未处理的承诺拒绝：无法加载 refresh-button.component.html ；区域：; 任务：Promise.then；值：无法加载 refresh-button.component.html 未定义

刷新按钮.component.ts

@Component({
    selector: 'app-refresh-button',
    styleUrls: ['./refresh-button.component.css'],
    templateUrl: './refresh-button.component.html'
})
export class RefreshButtonComponent implements OnInit {
    ...
}

刷新-button.component.html

<button class="btn btn-primary" (click)="refresh()">{{buttonText}}</button>

刷新按钮.stories.ts

import { moduleMetadata, Story, Meta } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { RefreshButtonComponent } from './refresh-button.component';

export default {
    title: 'Components/RefreshButton',
    component: RefreshButtonComponent,
    decorators: [
        moduleMetadata({
            imports: [CommonModule],
        }),
    ]
} as Meta;

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

export const Primary = Template.bind({});
Primary.args = {
};

注意：当所有 HTML 都放入 Angular 组件时，模板可以工作，但“styleUrls”样式会以同样的方式失败。

4

0 回答 0