Отправка пользовательских событий в Angular 6 [duplicate]
Существует другая альтернатива: использование setAttribute вместо добавления прослушивателя событий. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo innerHTML and event listeners</title>
<style>
div {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<div>
<span>Click here.</span>
</div>
<script>
document.querySelector('span').setAttribute("onclick","alert('Hi.')");
document.querySelector('div').innerHTML += ' Added text.';
</script>
</body>
</html>4 ответа
Используйте функцию Function.prototype.bind :
getMessages() {
this.apiService.getMessages(this.gotMessages.bind(this));
}
Что здесь происходит, так это то, что вы передаете gotMessages в качестве обратного вызова, когда это выполняется область действия различна, поэтому this не соответствует ожидаемому. Функция bind возвращает новую функцию, которая привязана к this, которую вы определили.
Вы также можете использовать функцию толстой стрелки:
getMessages() {
this.apiService.getMessages(messages => this.gotMessages(messages));
}
Я предпочитаю синтаксис bind, но это зависит от вас.
Третий вариант, чтобы связать метод для начала:
export class MainComponent {
getMessages = () => {
...
}
}
-
1Работал, спасибо! И спасибо за объяснение, почему это происходит. – Michael Gradek 7 July 2016 в 12:33
-
2Сохранено мое время .... хорошее объяснение – Gaurav Sharma 16 November 2017 в 13:55
-
3– Fabio Carvalho 27 September 2018 в 19:22
Или вы можете сделать это так
gotMessages(messagesFromApi){
let that = this // somebody uses self
messagesFromApi.forEach((m) => {
that.messages.push(m) // or self.messages.push(m) - if you used self
})
}
Поскольку вы просто передаете ссылку на функцию в getMessages, у вас нет правильного контекста this.
Вы можете легко исправить это, используя лямбду, которая автоматически связывает права this для использования внутри этой анонимной функции:
getMessages(){
this.apiService.getMessages((data) => this.gotMessages(data));
}
-
1
Определите функцию
gotMessages = (messagesFromApi) => {
messagesFromApi.forEach((m) => {
this.messages.push(m)
})
}