如何在使用[routerLink]（Angular）的组件中使用Storybook？

7 浏览
0 Comments

如何在使用[routerLink]（Angular）的组件中使用Storybook？

我正在使用Angular 11.0.5和Storybook 6.1.14，并使用以下组件：

import { Component, HostBinding, Input } from '@angular/core';
@Component({
    selector: 'ui-navigation-item',
    template: `
        
            instead of ng-content
        
    `,
    styleUrls: ['./navigation-item.component.scss'],
})
export class NavigationItemComponent {
    @Input()
    link!: (string | null)[] | null;
    @Input()
    decorations: boolean = true;
    @HostBinding('class')
    @Input()
    variant: 'regular' | 'reduced' = 'regular';
}

现在当我尝试将其添加到Storybook时：

import { RouterModule } from '@angular/router';
import { Meta } from '@storybook/angular';
import { NavigationItemComponent } from './navigation-item.component';
export default {
    title: 'Navigation Item',
    component: NavigationItemComponent,
    moduleMetadata: {
        imports: [RouterModule],
    },
} as Meta;
export const Primay = () => ({
    component: NavigationItemComponent,
    props: {
        link: ['/'],
    },
});

我会得到以下错误：

Unhandled Promise rejection: Template parse errors:
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("
        ][routerLink]="link">
            instead of ng-content
        
"): ng:///DynamicModule/NavigationItemComponent.html@1:52

我该如何在Storybook中使用[routerLink]？

PS：Stackoverflow告诉我需要添加更多细节，但我不知道还应该写些什么。我搜索并遇到了一些问题，但它们都没有解决我的问题。我相信我错过了一些小细节，但我还没有找到。

0