Правильный способ ввода событий в обратном вызове - PullRequest
Новая
       6

Правильный способ ввода событий в обратном вызове

0 голосов
/ 22 февраля 2020

Два дня go Я начал копать Angular, потому что, возможно, мне придется использовать его в будущем.

В настоящее время я изучаю взаимодействие компонентов, от ребенка к родителю, и я нашел несколько способов делать это, в каждом следующем примере ChildComponent имеет это свойство: 

@Output changeSignal : EventEmitter = new EventEmitter<string>();

Первый путь 

<input [(ngModel)]='message' (keyup)='handleKeyUp' />

message : string : '';

handleKeyUp() : void {
    this.changeSignal.emit(this.message);
}

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

Второй способ 

<input (keyup)='handleKeyUp($event)' />

handleKeyUp(event : any) : void {
    this.changeSignal.emit(event.target.value);
    // console.log(event.constructor.name);
}

Мы также не можем указать тип события, я не считаю это хорошей практикой в ​​машинописи.

Третий способ

console.log ( ) из предыдущего примера говорится, что KeyboardEvent и event.target имеют тип EventTarget, но этот класс, по-видимому, не определяет свойство 'value'. 

handleKeyUp(event : KeyboardEvent) : void {
    // Error in the terminal
    this.changeSignal.emit(event.target.value);
}

Свойство 'value' указано c к некоторому HTMLElement, например HTMLInputElement, чтобы предотвратить ошибку, мы имеем е, чтобы разыграть его: 

handleKeyUp(event : KeyboardEvent) : void {
    this.changeSignal.emit((<HTMLInputElement>event.target).value);
}

Это не очень хорошо.

Четвертый путь 

<input (keyup)='handleKeyUp($event.target.value) />

HandleKeyUp(inputContent : string) : void {
    this.changeSignal.emit(inputContent);
}

Мы позволяем входной тег обрабатывает его специфику, но шаблон html сложнее для чтения и содержит поведение, которое должно быть в файле javascript.

Какой из четырех способов вы считаете лучшим?

1 Ответ

1 голос
/ 22 февраля 2020

как вы относитесь к 

<input #nameInput (keyup)="handleKeyUp(nameInput.value)"/>

в angular считается хорошей практикой оставлять легкие DOM и обработку событий в шаблоне (а иногда и в директивах), чтобы ваши ts могли содержать только логику, связанную с моделью c. Также вы можете создать директиву, которая выдает привязанное значение <input> к выходному событию, если вам не нравится способ, который я предложил

...