使用addEventListener触发属性时，Angular组件不会重新呈现
当使用addEventListener触发属性时，Angular组件不会重新呈现的原因是，addEventListener是原生JavaScript的方法，它用于在DOM元素上添加事件监听器。在Angular中，组件的变化检测是通过Angular的变化检测机制来实现的，而不是依赖于DOM事件。
Angular的变化检测机制是基于Zone.js实现的，它会跟踪组件中的属性变化，并在变化发生时自动更新视图。当使用addEventListener方法添加事件监听器时，Angular无法感知到这个变化，因此不会重新呈现组件。
为了解决这个问题，可以使用Angular提供的事件绑定语法来替代addEventListener方法。在组件的模板中，可以使用括号语法绑定事件，例如：
<button (click)="handleClick()">点击按钮</button>上述代码中，当按钮被点击时，会调用组件中的handleClick方法。这样，Angular就能够正确地跟踪属性的变化，并在变化发生时重新呈现组件。
除了事件绑定语法，Angular还提供了其他一些机制来处理组件的属性变化，例如属性绑定、双向绑定等。这些机制都是基于Angular的变化检测机制实现的，能够确保组件的变化能够正确地反映到视图中。
关于Angular的更多信息，可以参考腾讯云的Angular产品介绍页面：Angular产品介绍
相关·内容
4回答
从几个月以来，我一直在使用React，而且React并不只是简单地重新呈现一个组件，而是找到了不同之处，并进行了这些更改。角质2做这样的事吗？
而且，当检测到状态变化时，角2是否重新呈现根节点中的所有组件，还是只重新呈现那些检测到变化的特定组件及其子树？
浏览 5提问于2016-04-24得票数 5
回答已采纳
2回答
我搜索了很多，以了解如果我在表单中始终使用双向数据绑定(ng-model)而不是单向数据绑定，是否会有一些糟糕的性能。我知道，对于每个双向数据库绑定，使用angular 1都会创建一个新的监视，而使用angular 1的大型应用程序可能会因此而出现性能问题。现在我需要知道，如果使用angular 2，如果我只使用单向数据绑定，是否会有一些不同？在不必要时需要避免双向数据绑定？
浏览 1提问于2016-09-13得票数 5
我有一个ListComponent和EntryComponent，用于在列表中附加一个项目。当通过DataService将项推入列表时，列表不会在ListComponent中更新。对于angular2的工作方式有什么想法吗？
名单处：
import {Injectable} from "angular2/core";
@Injectable()
export class DataService{
public items:Array<any> = [];
addItem(item:string):void{
this.item
浏览 2提问于2016-02-09得票数 0
我正在尝试和X3DOM一起使用React。我想要能够点击红色的x3dom <box>，这样当按下它时，它的颜色就会变成蓝色。我尝试过在<shape>标记中使用onClick方法。我只能通过按下html <button>来做到这一点。我在代码中也有这个按钮。
这是我的index.js文件。
import React from "react";
import ReactDOM from "react-dom";
class Toggle extends React.Component {
constructor(prop
浏览 5提问于2018-09-26得票数 0
我想知道如果父组件没有在自己的视图中呈现数组，而是通过@Input()将其发送给子组件，那么角度变化检测是否在父组件上运行？ 据我所知，changedetection只运行在视图中呈现的项目。在这种情况下，当数组通过属性绑定传递给子元素时，Angular是否将该数组视为在父组件视图中呈现的内容？ 我知道对于子级，您可以设置changedetectionstrategy.onpush，然后它将只检测对@Input()的更改
浏览 24提问于2019-05-03得票数 0
回答已采纳
我使用的是ReactJS中的函数组件。 const [showState, setState] = useState();
useEffect(() => {
document.addEventListener('click', handleClick);
return () => {
document.removeEventListener('click', handleClick);
}
}, []);
function handleClick(event) {
console.log(showState);
}
浏览 11提问于2020-09-04得票数 0
我在ReactJS中使用JQuery。单击该按钮时，第一次单击不执行任何操作。但是，在第二次单击时，我尝试实现的操作确实起作用了。但这是每点击一次就会赢一次。
我尝试过在openSubscriptionModalFromButton函数中添加$(document).ready()。这并不能解决问题。
我肯定会将openSubscriptionModalFromButton传递给我的组件。
我在Jquery文档上研究过.click，我也读过关于不要在React中使用Jquery的文章;)。
**在登陆组件中，我希望Jquery单击的按钮(参见id)
<button
id="rig
浏览 21提问于2019-07-10得票数 0
编辑：，我不想只在按钮被点击时才调用handleChange。这与handleClick无关。我在@shubhakhatri回答的评论中举了一个例子。
我想根据状态更改输入值，但它不触发handleChange()方法。如何触发handleChange()方法？
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
value: 'random text'
}
}
handleChange (e) {
conso
浏览 17提问于2017-03-02得票数 88
@Output() x: EventEmitter & @Input()回调：之间的权衡是什么？
作为我寻找解决方案的第一步，我彻底地阅读了。题目似乎提出了同样的问题，尽管，在接受标准内的问题相当肤浅，我的问题是寻找更多的细节。详情请见下文。
在Angular++ (而不是1.x)中，至少有3种方法可以完成子女与父母之间的沟通，但为了更好地实现第三种选择，我只关注其中的两种：
使用EventEmitter作为@Output
@Output() onEvent: EventEmitter<any> = EventEmitter<any>();
使用回调作为@In
浏览 0提问于2018-03-05得票数 1
我有一个简单的组件，它迭代对象的静态数组并显示内容。当将此组件添加到更大的应用程序中时，内容将正确显示，但我无法在其上注册任何单击事件。当我使用right click -> Inspect检查chrome中的元素时，就会看到body标记，它不会像预期的那样深入到单个元素。
通过手动导航，检查元素会显示组件不断地被DOM更新(div标记闪烁)。根据我的理解，不应该检测到任何更改，因为它是一个静态数组。
将对象数组更改为简单的字符串数组，['a', 'b', 'c']的行为与预期相同，并且DOM没有被更新。
添加额外的元素，ngFor之外的模板
浏览 4提问于2017-01-12得票数 5
回答已采纳
2回答
我想知道，是否所有的异步事件和回调都可以通过包装一个区域中的所有组件逻辑(包括组件内的非组件指令的逻辑)来追溯到特定的源组件，那么假设所有的更改都遵循单向流，那么只需要检查该源组件以及任何具有来自源组件的更改输入的子组件的更改。
这是理解的声音吗？
此更改检测策略在Angular2中可用吗？
为什么Angular2在任何异步(XHR)事件之后检测所有组件上的更改？
浏览 2提问于2016-06-28得票数 2
我在这个中找到了下面的代码。()我不知道为什么这些按钮的行为会有所不同。
一个可能的解释是:因为没有调用button的render方法来进行更新，所以第一个按钮的单击处理程序保持不变。但是，Button实例的this.props已经更改为包含新的onClick支柱。换句话说，如果更改了一个shouldComponentUpdate组件元素的道具，那么即使返回false，nextProps也将最终成为this.props。
const submit = val => alert(val);
class App extends React.Component {
state = { va
浏览 2提问于2019-01-05得票数 0
回答已采纳
我试图添加底部阴影到搜索栏上滚动在反应js。在我进入我的应用程序的第二页之前，它一直工作得很好。
当我试着读第二页的时候，它显示
Uncaught :无法读取null的属性“classList”
非工作代码：
import React, { useEffect } from 'react';
import { AiOutlineSearch } from "react-icons/ai";
const SearchBar = ({ totalPrograms, programs, setPrograms }) => {
const hand
浏览 1提问于2021-04-06得票数 0
这是我的React Hook： function Student(props){
const [open, setOpen] = useState(false);
const [tags, setTags] = useState([]);
useEffect(()=>{
let input = document.getElementById(tagBar);
input.addEventListener("keyup", function(event) {
if (event.keyCode =
浏览 43提问于2021-03-24得票数 0
回答已采纳
2回答
我在一个项目中使用"@angular/cli": "1.6"。
我正在尝试从服务器获取图像，这些图像只能通过授权令牌获取。因此，在我的服务中，我运行以下代码来获取添加了令牌本身的图像。
public getStudentProfilePic(url) : Observable<Blob>{
return this.http.get<Blob>(url, {responseType: 'blob' as 'json' })
}
在我的组件中，我有以下代码
打字脚本
fetchStudentProfileP
浏览 22提问于2019-08-07得票数 1
在使用React时，我理解它，因此在组件的render方法中调用setState是错误的做法；相反，请保持此方法的纯正性。但是，如果我需要基于链接到组件的事件来更新状态，我如何做到这一点？
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleCl
浏览 0提问于2018-07-24得票数 2
回答已采纳
事实上，我对MatDialog内嵌的ngComponentOutlet组件有更多的问题。但让我们从这里开始。
我正在建造的东西
我想在MatDialog中显示一个任意组件。我已经找到了一种方法，但是虽然它在角9上工作(我找到了一个用它编写的例子)，但是它不工作在角11 (我的项目所基于的版本)和角13 (@最新版本)。
观察
当内部<button (click)="close()">Close</button>包含一个close()，而我单击该按钮时，不会触发内部组件的close()方法
如果我将close()方法绑定到(mousedown)事件
浏览 17提问于2022-02-05得票数 3
回答已采纳
3回答
//有人能帮助我获得这个特定代码块的输出和行为吗?在所有这些形式的绑定函数之间有什么区别？
class App extends React.Component {
constructor() {
super();
this.name = 'MyComponent';
this.handleClick2 = this.handleClick1.bind(this);
}
handleClick1() {
alert(this.name);
}
handleClick3 = () => aler
浏览 3提问于2020-07-05得票数 0
回答已采纳
示例：
1)
<button onClick="{this.handleClick}">
Click me
</button>
<button onClick={() => this.handleClick()}>
为什么我们不能直接传递一个函数？我的意思是为什么我们需要一个箭头函数。
import React, { useState } from "react";
function Example() {
const [count, setCount] = useState(0);
return (
浏览 1提问于2020-07-19得票数 0
2回答
我写了，我想确保我正确地理解了动态。
在它中，只要选中其中一个复选框，就会触发可观察到的复选框事件的相应merge。
触发器导致重新定义一个实例数组，这些实例表示是否应该隐藏材料表列。
该组件还具有定义材料表列的方法：
getDisplayedColumns():string[] {
return this.columnDefinitions.filter(cd=>!cd.hide).map(cd=>cd.def);
}
方法被调用的原因是它在UI被更新的任何时候都会被调用。换句话说，角度变化检测会触发它吗？
浏览 7提问于2020-05-01得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
