与 routerLink @Input() 共享组件

Posted 2023-03-13

【中文标题】与 routerLink @Input() 共享组件

【英文标题】：Shared Component with routerLink @Input()

【发布时间】：2018-10-13 05:59:09

【问题描述】：

我想创建一个共享组件，它有一个按钮，当单击时，将用户路由到某处。路由应该来自组件的消费者。我怎样才能做到这一点？

---

我想我想让路由成为@Input() 参数。这是个好方法吗？

共享组件

@Component(
  selector: 'some-component',
  templateUrl: '<button [how do I bind the router parameters?]>Go Somewhere</button>'
)

在其他模块中

<some-component [routerLink]="['blah', someDynamicValue]">
</some-component>

<some-component 
  [routerLink]="['blah-2', someDynamicValue2]" 
  [routerLinkActive]="['is-active']" 
  [routerLinkActiveOptions]=" exact: true ">
</some-component>

---

当然，以前有人问过这个问题吗？我似乎无法追踪它...

【参考方案1】：

是的@Input() 是个好方法

试试这个

共享组件

@Component(
  selector: 'some-component',
  template: `<button [routerLink]="componentLink" 
     [routerLinkActive]="['is-active']" 
     [routerLinkActiveOptions]=" exact: true ">Go Somewhere</button>`
)
export class SomeComponent

  @Input()
  componentLink: any[];

  //Initialize it as an empty array for default values
  @Input()
  componentLinkActive: string[] = [];

  //Same goes here
  @Input()
  componentLinkActiveOptions: exact: boolean =  exact: false 

在其他模块中

<some-component 
[componentLink]="['blah', someDynamicValue]" 
[componentLinkActive]="['is-active']" 
[componentLinkActiveOptions]=" exact: true "></some-component>

并且在你的共享组件模块中确保导入RouterModule

【讨论】：

谢谢约翰！我已经针对SomeComponent 的不同用法更新了我的问题。如何添加routerLinkActive 和routerLinkActiveOptions 作为可选输入参数？

@spottedmahn 刚刚更新了我的答案，希望对您有所帮助

此解决方案的关键部分是确保<some-component [componentLink] ... > 中的componentLink 用方括号括起来。否则 Angular 的参数解析逻辑将不会运行，参数值将是一个纯字符串（不是数组）。