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

我有一个按钮组件，其中有添加项、编辑项和删除项按钮。我希望对其他页面使用相同的布局

，例如../item、/bags

（其中将是Add Bag、Edit Bag和Delete Bag），这些按钮将能够发送到正确的表单以填写详细信息<代码>例如./物品表格/行李表格。

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

---

我尝试过寻找实现这一点的方法，但我只想到在这个按钮组件上使用一组if循环，并检查上一页的位置和相应的路由。

您应该使用@Input。您将能够向组件传递参数。在本例中-传递按钮的名称和URL

---

请参考

您应该使用@Input。您将能够向组件传递参数。在本例中-传递按钮的名称和URL

---

请参阅

以下是使用Rokas解决方案的方法

以下代码将为每种类型、物品和行李创建6个按钮3，链接到示例：

按如下方式定义可重用组件：

@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() {
  }

}

@组件({
选择器：“应用程序操作按钮”，
模板：`
编辑{{type}
删除{{type}
添加{{type}}
`,
})
导出类ActionButtonComponent在NIT上实现{
@输入（）
类型：字符串
构造函数（）{}
恩戈尼尼特（）{
}
}

像这样使用它

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

@组件({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
}

以下是使用Rokas解决方案的方法

以下代码将为每种类型、物品和行李创建6个按钮3，链接到示例：

按如下方式定义可重用组件：

@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() {
  }

}

@组件({
选择器：“应用程序操作按钮”，
模板：`
编辑{{type}
删除{{type}
添加{{type}}
`,
})
导出类ActionButtonComponent在NIT上实现{
@输入（）
类型：字符串
构造函数（）{}
恩戈尼尼特（）{
}
}

像这样使用它

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

@组件({
选择器：“我的应用程序”，
模板：`
`
})
导出类AppComponent{
}

@haowjern如果您觉得答案有帮助，请向上投票。如果它解决了你的问题，就接受它。@haowjern如果你觉得答案有帮助，就投票吧。如果它解决了你的问题，接受它。注意，这将创建6个按钮。。。按钮缺少一个typeNote，这将创建6个按钮。。。按钮缺少一个类型