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（）

1 个答案: