如何解决如何使用 [routerLink] (Angular) 将 Storybook 与组件一起使用?
我使用的是 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。