Question

我有几个组件都做同样的事情：

显示表单（表单虽然各不相同，但HTML各有所不同）
捕获表单
使用REST API验证并发送表单

我希望在组件之间分享某些内容。例如，表单都有一个RadioButtons列表，其中包含以下值：

@Input() radioList: Object[] = [
    { label: 'Unsatisfactory', value: 1 },
    { label: 'Needs Improvement', value: 2 },
    { label: 'Meets Expectations', value: 3 },
    { label: 'Exceeds Expectations', value: 4 },
    { label: 'Outstanding', value: 5 }
  ];

有没有办法分享这样的内容，所以如果我想编辑RadioList，我不需要这样做四次？

Answer 1

扩展课程？

//property and property-level annotations (@Input) will be picked up by ancestors
export abstract class RadioListAwareComponent{
     @Input() radioList: Object[] = [
         { label: 'Unsatisfactory', value: 1 },
         { label: 'Needs Improvement', value: 2 },
         { label: 'Meets Expectations', value: 3 },
         { label: 'Exceeds Expectations', value: 4 },
         { label: 'Outstanding', value: 5 }
     ];
}

@Component({
    template: `<div>Comp1</div>`
})
export class RadioListImplComponentONE extends RadioListAwareComponent{}

@Component({
    template: `<div>Comp2</div>`
})
export class RadioListImplComponentTWO extends RadioListAwareComponent{}

Answer 2

您可以自己创建工厂并将其注入控制器https://docs.angularjs.org/guide/providers

可以在组件之间共享逻辑吗？

2 个答案: