Avoid Dom misunderstandings when using Angular2
This time I will bring you how to avoid Dom misunderstandings when using Angular2, and what are the precautions to avoid Dom misunderstandings when using Angular2. The following is a practical case, let's take a look.
Preface
The design goal of Angular2 is to make the browser and DOM independent. The DOM is complex, so decoupling components from it will make our applications easier to test and refactor. In order to support cross-platform, Angular also encapsulates the differences of different platforms through abstraction.Content
#1. Why can’t the DOM be manipulated directly?
Angular2 adopts AOT static compilation mode. In this form, our template type must be stable and safe. Directly2. Three incorrect ways to operate DOM:
@Component({ ... })
export class HeroComponent {
constructor(private _elementRef: ElementRef) {}
doBadThings() {
$('id').click(); //jquery
this._elementRef.nativeElement.xyz = ''; //原生的ElementRef
document.getElementById('id'); //javascript
}
}3. How does Angular2 DOM operate mechanism?
In order to support cross-platform, Angular encapsulates the differences of different platforms through abstraction layers. For example,4. Correct way to operate DOM (ElementRef and Renderer2):
product.component.html<p>商品信息</p>
<ul>
<li *ngFor="let product of dataSource| async as list">
{{product.title}}
</li>
</ul>
<p #dia>
</p>import { Component, OnInit,Renderer2, ViewChild，ElementRef,AfterViewInit} from '@angular/core';
@Component({
selector: 'app-product',
templateUrl: './product.component.html',
styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit,AfterViewInit {
@ViewChild('dia') dia:ElementRef ;定义子试图
ngOnInit() {
/**1.
*创建一个文本
*/
this.dia.nativeElement.innerHTML="这只是一个测试的文档";
/**2.
*添加click事件
*/
let ul=this.element.nativeElement.querySelector('ul');
this.render2.listen(ul,"click",()=>{
this.render2.setStyle(ul,"background","blue");
ngAfterViewInit(){
/**3.
*修改背景颜色
*/
let li=this.element.nativeElement.querySelector('ul');
this.render2.setStyle(li,"background","red");
}
}Summary
In fact, when learning a language, we should first follow its specifications, accept the differences between it and the previous language, and then deeply understand the differences between it and the previous language. What is the difference in the method and why do we do this? Otherwise we cannot understand the beauty of this language. I hope it will be helpful to you! I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:Usage of vue built-in instructions
The above is the detailed content of Avoid Dom misunderstandings when using Angular2. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Java Error: Encoding and Decoding Errors, How to Solve and Avoid
Jun 24, 2023 pm 05:27 PM
Java is a very popular programming language and many projects are written in Java. However, when we encounter "Encoding and Decoding Errors" during the development process, we may feel confused and confused. In this article, we will introduce the causes of Java encoding and decoding errors, how to solve and avoid these errors. What is a codec error? During Java development, we often need to process text and files. However, different texts and files may make
Java Error: JavaFX View Error, How to Handle and Avoid
Jun 25, 2023 am 08:47 AM
JavaFX is a user interface framework for the Java platform, similar to Swing, but more modern and flexible. However, you may encounter some view errors when using it. This article will introduce how to deal with and avoid these errors. 1. Types of JavaFX view errors When using JavaFX, you may encounter the following view errors: NullPointerException This is one of the most common errors and usually occurs when trying to access an uninitialized or non-existent object. This may
Java Errors: JDBC Errors, How to Solve and Avoid
Jun 24, 2023 pm 02:40 PM
With the widespread application of Java, JDBC errors often occur when Java programs connect to databases. JDBC (JavaDatabaseConnectivity) is a programming interface in Java used to connect to a database. Therefore, a JDBC error is an error encountered when a Java program interacts with a database. Here are some of the most common JDBC errors and how to solve and avoid them. ClassNotFoundException This is the most common JDBC
Methods to avoid falling into infinite loops in PHP language development
Jun 10, 2023 pm 02:36 PM
In PHP language development, we often encounter infinite loops, which will execute certain codes without limit, causing the program to crash or even the server to crash. This article will introduce some methods to avoid falling into infinite loops and help developers better solve this problem. 1. Avoid infinite recursive calls in a loop. When a function or method is called in a loop, if the function or method contains a loop statement, an infinite recursive call will be formed, causing the program to crash. To avoid this from happening, you can add a
Common misunderstandings and solutions about Python variable naming rules
Jan 20, 2024 am 09:10 AM
Common misunderstandings and solutions to Python variable naming rules In Python programming, correct variable naming is very important. A good naming convention can make the code more readable and maintainable, and can avoid some potential errors. However, newbies often make some common variable naming misunderstandings. This article will introduce some common misunderstandings and give solutions and specific code examples. Misunderstanding 1: Use reserved keywords as variable names. Python has some reserved keywords. These keywords are in Python syntax.
Java Error: JavaFX Node Error, How to Handle and Avoid
Jun 24, 2023 pm 05:37 PM
JavaFX is a graphical interface toolkit for the Java platform. It provides a rich API to create windows, controls, scenes, etc. But while using JavaFX, you may encounter some node errors, which may cause the application to not work properly. This article will introduce some common JavaFX node errors and how to deal with and avoid them. NullPointerExceptionNullPointerException is the most common error in JavaFX applications
Golang development notes: How to avoid memory leak problems
Nov 23, 2023 am 09:38 AM
Golang is a fast and efficient development language that is widely popular for its powerful concurrency capabilities and built-in garbage collection mechanism. However, even when developing with Golang, it is still possible to encounter memory leaks. This article will introduce some common Golang development considerations to help developers avoid memory leak problems. Avoid circular references Circular references are one of the common memory leak problems in Golang. When two objects refer to each other, if the references to these objects are not released in a timely manner,
How to avoid compatibility pitfalls when upgrading from PHP5.6 to PHP7.4?
Sep 05, 2023 am 08:25 AM
How to avoid compatibility pitfalls when upgrading from PHP5.6 to PHP7.4? With the continuous advancement of technology, PHP, as a commonly used programming language, often has some compatibility issues between different versions. When we decide to upgrade from an older version to a newer version, it is easy to encounter some unexpected problems, especially during the upgrade from PHP5.6 to PHP7.4. To help you avoid compatibility pitfalls, this article will introduce some common pitfalls and their solutions. Syntax error PH
