angular - Angular 面试问题 - 如果“this”开关是一个组件，你会如何设计它？

Question

所以我在一次采访中被问到这个问题，显然我没有在答案中提供足够的细节/概念，所以我很想听听我可能错过了什么并帮助其他人解决这些问题。

问题

如果您要为墙壁开关设计一个组件（即打开灯的组件），您将如何设计它？您认为构成该组件的基本方面是什么？

我的答案

• 因此，我注意到在这种情况下，@Input 属性用于控制组件关闭/打开的初始启动状态。

• 处理输入事件被更改的内部逻辑，然后将所述事件发送到另一个组件，在这种情况下是一个灯组件来触发灯打开。

• 也许还需要一个配置对象来确定额外的功能，具体取决于您需要该组件的复杂程度。

• 具有输入或属性选择器来设置组件的样式。

我可能错过了哪些重要概念？

标签： angulardesign-patternsangular-components

Answer 1

基本上，这个问题的答案范围很广，我们不能说哪个是对的，哪个是错的。但是，您需要考虑组件的基本设计single-responsibility方法。并且组件的可重用性在那里。

首先，设计单个 Switch-component，然后您可以将其包装到父板组件中。因此，每个状态管理都必须仅由父组件处理。您的子开关组件仅负责显示状态。

• 我们在这里有两种主要的方法来在父子组件之间进行通信。

  1. Using `@Input()` and `@Ouput()` decorator
  2. Using Declarative way to do component communication using `rxjs` `behaviour-subject`.
  

• 我们可以content projection在这里使用template-refand ng-template。当我们想要渲染 dirrent 模板以考虑 dirrent 设计时，这种方法很有用因此，我们可以实现 Polymorephism [仅按术语]，以便一个单一的 switch-component 可以在不同的样式考虑下重复使用。
• 我们还可以通过实现自定义来使用 Reactive-Forms 方法，ControlValueAccesor以便我们可以通过自定义方式处理开关的切换。通过响应式表单方式，我们还可以利用异步验证规则，我们还可以使forms-array和添加或删除新的切换到板组件变得更加容易。当你想使用ATOMIC Design考虑时，这种方法非常有用。
• 我们也可以使用 custom Attribute-Directive，同样的方式Angular/Material使用通过简单input component to mat-input和相同的方式button to in ma-raised-button组件。这样我们就可以利用扩展能力。