Angular Interview Question-如果“ this”开关是一个组件,您将如何设计呢?

问题描述 投票:0回答:1

所以在面试中有人问我这个问题,显然我没有给出足够的细节/概念,所以我很想听听我可能错过的内容,并为其他人提供有关此类问题的帮助。

问题

如果您要为墙壁开关设计一个组件(即打开灯的组件),您将如何设计它?您认为组成该组件的基本方面是什么?

我的回答

  • 因此,我注意到在这种情况下,一个@Input属性可以控制组件的初始启动状态。[

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

  • 也许还需要使用一个配置对象来确定其他功能,具体取决于您需要此组件的复杂程度。

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

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

angular design-patterns angular-components
1个回答
0
投票

[基本上,这个问题的回答范围很广,我们不能说哪个对与错。但是,组件的基本设计需要考虑single-responsibility方法。并且组件可重复使用。

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

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

    1. Using `@Input()` and `@Ouput()` decorator
    2. Using Declarative way to do component communication using `rxjs` `behaviour-subject`.
    
  • 我们可以在这里使用content projectiontemplate-ref来使用ng-template。当我们要为直接设计考虑而渲染直接模板时,此方法很有用。因此,我们可以实现Polymorephism [仅按术语使用],这样一个单独的开关组件就可以在考虑不同样式的情况下重复使用。
  • 我们还可以通过实现自定义ControlValueAccesor来使用Reactive-Forms方法,以便我们可以处理从自定义方式打开或关闭的切换。通过反应形式,我们还可以利用异步验证规则,并且还可以使forms-array以及向板组件添加或删除新开关变得更加容易。当您要考虑使用ATOMIC Design时,此方法非常有用。
  • 我们也可以使用自定义Attribute-Directive,通过简单的Angular/Material和相同的input component to mat-input组件使用与button to in ma-raised-button相同的方式。这样我们就可以利用扩展能力。
© www.soinside.com 2019 - 2024. All rights reserved.