Angular 如何避免在角视图中重复ViewChildren？

我有10多个组件，其中重复了以下代码：

export class Component implements OnInit {
    @ViewChildren(CheckboxComponent) checkboxes: QueryList<CheckboxComponent>;

     public onSelectedAll(value: boolean): void {
        this.checkboxes
            .toArray()
            .slice(1)
            .forEach((element) => {
                element.checked = value;
            });
    }

    public onSelectedOne(value): void {
        console.log(value);
    }
}

导出类组件实现OnInit{
@ViewChildren（CheckboxComponent）复选框：QueryList；
public onSelectedAll（值：布尔值）：void{
这是一个复选框
.toArray（）
.切片（1）
.forEach（（元素）=>{
element.checked=值；
});
}
公共onSelectedOne（值）：无效{
console.log（值）；
}
}

要如何从外部提取此代码，它应该是服务还是自定义导出的类、函数

---

如果需要，如何在有角度且易于插入的组件中正确执行此操作？

您肯定需要提供（复选框组件）的详细信息

@ViewChildren（CheckboxComponent）复选框：QueryList；

你也应该考虑你的设置，但是如果你想继续使用这个设置，不要使用@ ViewChildren来从你的子组件获取数据，而是使用事件发射器来接收你的父组件中的数据。 每当复选框的状态更改时，都会将事件与数据一起发送给父级

检查EventEmitter的角度文档：

---

最好的方法是：“使用具有此功能的自定义指令，并将其与您的复选框一起使用”

因为我们没有关于这些组件的语义的足够详细信息，并且如果可以进行更好的实现（例如，您可以使用复选框列表的模型，而不是查询ViewChildren）. 我只想从高层次的角度来回答

在这种情况下，您可以利用OOP并使用继承，您可以将公共逻辑提取到类中（必要时可以将其抽象）

普通类

export abstract class CommonComponent {
   /* Put common Methods and Fields here
      including @ViewChildren and any other annotated fields */
}

组件实现

export class MyComponent extends CommonComponent implements OnInit {
   /* Put here Methods and Fields specific to this Component
      In this component, you can make use of all the fields and methods
      that are public or protected from the parent class
      (public ones can be used in template as well */
}

---

使单个组件用重复代码导入10次，否？每个组件都有自己的逻辑，不仅如此。你的意思是创建公共组件并扩展它吗？如果你能与我们分享你不能共享的逻辑，那就更好了。你的代码根本没有逻辑，使用一个带有适当输入和输出的多复选框组件很简单。你需要一个更强的抽象。也就是说，一个

CheckboxFieldComponent

包装您的复选框，并可以在需要时控制所有复选框。您可以共享一个示例吗？在我的示例中，我需要两个指令，一个用于选择当前复选框，另一个用于选择页面上的所有复选框，对吗？我可以从指令访问“@ViewChildren”组件吗？引用元素的ElemRef可以用作指令中“@ViewChildren”的替代项。我将很快共享一个示例

export class MyComponent extends CommonComponent implements OnInit {
   /* Put here Methods and Fields specific to this Component
      In this component, you can make use of all the fields and methods
      that are public or protected from the parent class
      (public ones can be used in template as well */
}