Javascript 如何使用[routerLink]（角度）将故事书与组件一起使用？

我使用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';
}

我将得到以下错误：

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)

未处理的承诺拒绝：模板分析错误：
无法绑定到“routerLink”，因为它不是“a”的已知属性。("
][routerLink]=“链接”>
而不是ng内容
“”：ng:///DynamicModule/NavigationItemComponent。html@1:52 ; 区域：；任务：承诺；值：错误：模板分析错误：
无法绑定到“routerLink”，因为它不是“a”的已知属性。("
][routerLink]=“链接”>
而不是ng内容
“”：ng:///DynamicModule/NavigationItemComponent。html@1:52
在syntaxError（compiler.js:2444）
位于TemplateParser.parse（compiler.js:12679）
在JitCompiler._parseTemplate（compiler.js:28429）
在JitCompiler.\u compileTemplate（compiler.js:28417）
在compiler.js:28361
在Set.forEach（）处
在JitCompiler.\u compileComponents（compiler.js:28361）
在compiler.js:28274
在Object.then（compiler.js:2434）
在JitCompiler.\u compileModuleAndComponents（compiler.js:28273）错误：模板解析错误：
无法绑定到“routerLink”，因为它不是“a”的已知属性。("
][routerLink]=“链接”>
而不是ng内容
“”：ng:///DynamicModule/NavigationItemComponent。html@1:52
在syntaxError(http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:8109:19）
在TemplateParser.parse(http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:18344:19）
在JIT编译器上。\u解析模板(http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34094:37）
在JIT编译器上。\u compiletTemplate(http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34082:69）
在http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34026:46
在Set.forEach（）处
在JIT编译器上。\u compileComponents(http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:34026:19）
在http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:33939:18
那么(http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:8099:52）
在JIT编译器上.\u编译模块和组件(http://localhost:6006/vendors~main.f108962ff4c47d276288.bundle.js:33938:26）

如何在故事书中使用[routerLink]

---

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

导入RouterTestingModule而不是在故事中导入RouterModule，导入RouterTestingModule而不是在故事中导入RouterModule，导入RouterTestingModule在元数据的范围内指定模块导入：

import { Meta, moduleMetadata } from '@storybook/angular';

export default {
    title: 'Navigation Item',
    component: NavigationItemComponent,
    decorators: [
        moduleMetadata({
            declarations: [NavigationItemComponent],
            imports: [RouterTestingModule],
        }),
    ],
} as Meta;

---

在元数据的范围内指定模块导入：

import { Meta, moduleMetadata } from '@storybook/angular';

export default {
    title: 'Navigation Item',
    component: NavigationItemComponent,
    decorators: [
        moduleMetadata({
            declarations: [NavigationItemComponent],
            imports: [RouterTestingModule],
        }),
    ],
} as Meta;

---

不。同样的错误，不。同样的错误。