Angular Интервью Вопрос - Что, если бы «этот» переключатель был компонентом, как бы вы его спроектировали?

Question

Итак, мне задали этот вопрос на собеседовании, и, очевидно, я не дал достаточно подробностей / понятий в ответ, поэтому мне было бы интересно услышать, что я, возможно, пропустил, и помочь другим с такими вопросами.

Вопрос

Если бы вы разработали компонент для настенного выключателя (т.е. тот, который включает свет), как бы вы его спроектировали и во что вы верите? фундаментальные аспекты, которые будут составлять компонент?

Мой ответ

• Поэтому я заметил, что в этом случае свойство @Input контролирует начальное состояние запуска компонента вкл / выкл.

• Внутренняя логика c для обработки измененного входного события, а затем для передачи указанного события в другой компонент, в данном случае легкий компонент, запускающий включение света.

• Возможно, также взять объект конфигурации для определения дополнительных функций, в зависимости от того, насколько сложным должен быть этот компонент.

• Наличие селекторов ввода или атрибутов стилизовать компонент.

Какие важные понятия я мог пропустить?

Answer 1

В основном, этот вопрос имеет очень широкий спектр ответов, и мы не можем сказать, какой из них правильный и неправильный. Но, основываясь на c дизайне компонента, вы должны учитывать single-responsibility подход. и возможность повторного использования компонента есть.

Сначала, создайте одиночный Switch-компонент, затем Вы можете обернуть его в родительский компонент платы. Так что каждое управление состоянием должно обрабатываться только родительским компонентом. Ваш дочерний коммутатор отвечает только за отображение статуса.

• У нас есть два основных подхода для связи между родительским и дочерним компонентами.

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

• мы можем использовать content projection здесь с использованием template-ref и ng-template. Этот подход полезен, когда мы хотим визуализировать другой шаблон для рассмотрения различных проектов. Таким образом, мы можем достичь полиморфизма [ только по термину ], так что один единственный компонент-переключатель может использоваться повторно с учетом различных стилей.
• Мы также можем использовать подход Reactive-Forms, реализовав пользовательский ControlValueAccesor, чтобы мы могли обрабатывать переключение включения или выключения по своему усмотрению. С помощью Reactive form-way мы также можем использовать асинхронные c правила проверки, и мы также можем сделать forms-array, и добавить или удалить новый переключатель для компонента платы становится намного проще. Этот подход очень полезен, когда вы хотите использовать ATOMIC Design во внимание.
• Мы также можем использовать пользовательские Attribute-Directive, так же, как Angular/Material использует, поворачивая простой input component to mat-input и таким же образом button to in ma-raised-button составная часть. так что мы можем использовать расширяемость.