与 routerLink @Input() 共享组件

Question

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

我想将路线作为 @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>

肯定有人问过这个问题吧？我似乎无法追踪它...

Answer 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

与 routerLink @Input() 共享组件

Shared Component with routerLink @Input()

angular-routing

angular-components

angular