Ввод и вывод, как работать с ними, чтобы следовать соглашению об именах стилевого руководства Angular 2?

До того, как я узнал что-то лучшее, я имел обыкновение определять мою директиву так:

...
inputs: [
  'onOutside'
]
... 

export class ClickOutsideDirective {
  @Output() onOutside: EventEmitter<any> = new EventEmitter();
}

Но потом я прочитал руководство по стилю и сказал, что вы не должны ставить префиксы в свои выходные данные on так как Angular 2 поддерживает on- синтаксис в шаблонах.

Поэтому я пытаюсь изменить это на что-то вроде:

@Input() outsideClick: any;
@Output() outsideClick: EventEmitter<any> = new EventEmitter();

Тем не менее, мне трудно отделить @Input имя из Output имя, если вы не можете использовать on префикс.

Прежде чем вы могли бы назвать оба @Input а также @Output то же самое, но если объявить оба в экспортированном классе, это больше не работает, так как будет выдано сообщение об ошибке.

Если я назову @Input в outside и @Output в outsideClick, это на самом деле не имеет смысла, так как оба они одно и то же. outside это функция, которую я хочу выполнить при вызове outsideClick,

Также, outsideClick не будет знать, что делать, если outside больше не называю одно и то же, или я что-то упустил?

Как я должен подходить к названию @Input а также @Output переменные здесь, чтобы они все еще работали и имели такой же смысл, как в первом примере?

РЕДАКТИРОВАТЬ:

Пример использования:

<div clickOutside [exceptions]="['.toggler']" (outside)="doSomethingOnOutsideClick()"></div>
Источник

2 ответа

Решение

Определенно не используйте on, В JavaScript события также не начинаются с on, Только обработчики событий. Здесь нет onClick событие в JS. Название события click и если вы назначите функцию onClick эта функция будет вызвана, когда click Событие получено.

Если у вас есть входы и выходы, которые принадлежат друг другу, назовите их

@Input() name:any; 
@Output() nameChange: EventEmitter<any> = new EventEmitter();;

Это позволяет использовать для Angular2 "двустороннюю привязку"

[(name)]="someProp"

Если вы используете @Input() а также @Output() (предпочтительный способ) тогда вам не нужно inputs: [] а также outputs: [], Это два способа сделать одно и то же, и если вы используете оба, один излишний.

Чтобы соответствовать схеме именования браузера, вы можете сделать следующее:

(nameChange)="onNameChange($event)"

иметь обработчик события onNameChange быть вызванным, когда nameChange событие получено.

Когда событие не является частью пары ввода / вывода, вы можете или должны опустить Change

(loggedIn)="onLoggedIn($event)
Источник

На самом деле, ОП задал несколько вопросов, но с одним и тем же контекстом (следовательно, ниже есть несколько разделов).

Использование и/или определение

Если вы хотите поддерживать «двустороннюю привязку» Angular-2 и более поздних версий, соедините ввод с выходом с суффиксом, например:

      @Input() password: string;
@Output() passwordChange: EventEmitter<string> = new EventEmitter();

Это позволяет сокращать руки, например:

      <app-my-component
    [(password)]="myPasswordProp"
    >
</app-my-component>

Выше я передаю значение по умолчанию компоненту в качестве входных данных и принимаю пользовательские изменения в качестве выходных данных, в основном синхронизируяmyPasswordPropсMyComponentвнутреннее состояние.

Соглашение об именовании

ВAngular-2+ используйте префикс "" только для обработчиков событий, а не для эмиттеров событий.

Обратите внимание , что префикс «» не разрешен для событий (и даже вызывает ошибку компиляции, по крайней мере, в более новых версиях Angular).

Даже вJavaScript, именованного события нет, имя событияclick. Единственное отличие состоит в том, что JS используетonClickкак имя атрибута, куда мы передаем обработчик события, в то время как Angular запрещает этот префикс.

Angular по крайней мере позволяет использоватьonдля обработчиков событий, например:

      (passwordChange)="onPasswordChange($event)"

ГдеonPasswordChangeназванный обработчик события вызывается, когдаpasswordChangeсобытие срабатывает.

Но если событие не является частью пары вход/выход, мы должны опуститьChangeсуффикс при определении вывода и используйте его как:

      (loggedIn)="onLoggedIn($event)"

Более того , чтобы иметь префикс, подобный схеме именования браузера, и/или отделять события от других вещей, наша компания использовала "by" вместо префикса, например:

      (byLogin)="onLogin($event)"

(bySave)="onSave($event)"

Что намного читабельнее, потому что может быть частью человеческих предложений, например:

  • «Обработчик нашего приложения ожидает входа в систему, который инициируется событиями входа в библиотеку».

Или наоборот:

  • «Библиотека с помощью событий входа в систему запускает обработчик нашего приложения, который ожидает входа в систему ».

Удобочитаемость — одна из причин, по которой префиксы «on» и «by» можно использовать так, как они есть.

Аннотация класса против аннотации свойства

Просто потому, что ОП упомянул об этом:

  • С использованием@Input()и/или@Output()аннотация с переменными-членами является предпочтительным способом.

  • Если вы используете выше, то вам не нужно проходитьinputs: []и/илиoutputs: []к аннотации класса.

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

Источник
Другие вопросы по тегам