如何使用 [routerLink] (Angular) 将 Storybook 与组件一起使用？

编程问答 2022-05-30

问题描述

我使用的是 Angular 11.0.5 和 Storybook 6.1.14 以及以下组件：

import { Component,HostBinding,Input } from '@angular/core';

@Component({
    selector: 'ui-navigation-item',template: `
        <a [ngClass]="{ 'no-decorations': !decorations }" [routerLink]="link">
            instead of ng-content
        </a>
    `,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'. ("
        <a [ngClass]="{ 'no-decorations': !decorations }" [ERROR ->][routerLink]="link">
            instead of ng-content
        </a>
"): ng:///DynamicModule/NavigationItemComponent.html@1:52 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a kNown property of 'a'. ("
        <a [ngClass]="{ 'no-decorations': !decorations }" [ERROR ->][routerLink]="link">
            instead of ng-content
        </a>
"): ng:///DynamicModule/NavigationItemComponent.html@1:52
    at SyntaxError (compiler.js:2444)
    at TemplateParser.parse (compiler.js:12679)
    at JitCompiler._parseTemplate (compiler.js:28429)
    at JitCompiler._compileTemplate (compiler.js:28417)
    at compiler.js:28361
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:28361)
    at compiler.js:28274
    at Object.then (compiler.js:2434)
    at JitCompiler._compileModuleAndComponents (compiler.js:28273) Error: Template parse errors:
Can't bind to 'routerLink' since it isn't a kNown property of 'a'. ("
        <a [ngClass]="{ 'no-decorations': !decorations }" [ERROR ->][routerLink]="link">
            instead of ng-content
        </a>
"): ng:///DynamicModule/NavigationItemComponent.html@1:52
    at SyntaxError (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:8109:19)
    at TemplateParser.parse (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:18344:19)
    at JitCompiler._parseTemplate (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34094:37)
    at JitCompiler._compileTemplate (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34082:69)
    at http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34026:46
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34026:19)
    at http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:33939:18
    at Object.then (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:8099:52)
    at JitCompiler._compileModuleAndComponents (http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:33938:26)

如何在 Storybook 中使用 [routerLink]？

PS：Stackoverflow 告诉我添加更多细节，但我不知道我还应该写什么。我搜索并偶然发现了一些问题，但它们都没有解决问题。我很确定我错过了一件小事，但我还没有弄清楚。

解决方法

在元数据的 decorators 中指定模块导入：

The system cannot find the path specified.
,

不要在故事中导入 RouterModule，而是导入 RouterTestingModule

angularangularjavascriptrouterlinkstorybook