Question

我有一个Buttons组件，其中有Add Item，Edit Item和Delete Item按钮。我想对其他页面e.g. ./item, ./bags使用相同的布局（它将是“添加袋”，“编辑袋”和“删除袋”），并且这些按钮将能够转到正确的表单以填写详细信息。 e.g. ./item_form, ./bag_form.

有没有一种方法可以在其他页面中重复使用相同的组件，并且在这些页面中我可以指定按钮的名称以及其路由到的位置？

我试图寻找实现此目的的方法，但我只想到了在此按钮组件上使用一堆if循环，并检查上一页的位置并进行相应路由的想法。

Answer 1

您应该使用@Input。您将能够将参数传递给组件。在这种情况下-传递按钮的名称和URL。

参考Angular Input documentation

Answer 2

这是使用Rokas解决方案的方法。

以下代码将为每种类型，物品和袋子创建6个按钮3，并链接到示例：https://stackblitz.com/edit/stackoverflow-example-57221289

这样定义您的可重用组件：

@Component({
  selector: 'app-action-button',
  template: `
      <button type="button" routerLink="/{{type}}/edit"> edit {{type}}</button>
      <button type="button" routerLink="/{{type}}/delete"> delete {{type}}</button>
      <button type="button" routerLink="/{{type}}/add"> add {{type}}</button>
  `,
})
export class ActionButtonComponent implements OnInit {

@Input()
type: String

  constructor() { }

  ngOnInit() {
  }

}

并像这样使用它

@Component({
  selector: 'my-app',
  template: `
        <app-action-button [type]="'item'"></app-action-button>
        <app-action-button [type]="'bags'"></app-action-button>
    `
})
export class AppComponent  {
}

如何在具有不同路由的组件之间重用相同的HTML页面？

2 个答案: