Question

我有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);
    }
}

如何将这些代码提取到外部，它应该是服务还是自定义导出的类，函数？

如何在Angular中正确执行此操作，并在需要时轻松注入组件？

Answer 1

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

@ViewChildren(CheckboxComponent) checkboxes: QueryList<CheckboxComponent>;

您还应该考虑设置，但是，如果要保留此设置，请不要使用@ViewChildren从子组件中获取数据，而要使用EventEmitters来接收父组件中的数据。

每当复选框状态更改时，带有数据的父事件就会发出事件。

检查Angle文档中的EventEmitters：

https://angular.io/api/core/EventEmitter

Answer 2

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

Answer 3

由于我们对于这些组件的语义没有足够的详细信息，并且如果可以实现更好的实现（例如，代替查询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 */
}

如何避免在Angular中重复使用ViewChildren？

3 个答案: