Shulou(Shulou.com)06/03 Report--

This article mainly introduces the reasons why Angular does not call methods in the template, the article is very detailed, has a certain reference value, interested friends must read it!

When you create an angular component after running the ng generate component command, four files are generated by default:

A component file .implement.ts

A template file .implement.html

A CSS file, .implement.css

Test file .implement.spec.ts

Templates, which are your HTML code, need to avoid calling methods of non-event classes. For instance

Translate Name: {{originName}}

Translate Name: {{getTranslatedName ('Hello')}}

Click metering export class AppComponent / component file import {Component} from'@ angular/core';@Component ({selector: 'my-app', templateUrl:'. / app.component.html', styleUrls: ['. / app.component.css'],}) export class AppComponent {originName = 'Hello'; getTranslatedName (name: string): string {console.log ('getTranslatedName called for', name); return' hello worldview' } onClick () {console.log ('Button clickedcards');}}

We call the getTranslatedName method directly in the template, which conveniently displays the return value hello world of this method. There seems to be no problem, but if we check the console, we will find that this method has been called more than once.

And when we click the button, we will continue to call this method even if we don't want to change the originName.

The reason is related to the change detection mechanism of angular. Normally, we want to re-render the corresponding module when a value changes, but angular has no way to detect whether the return value of a function has changed, so the function can only be executed each time a change is detected, which is why when the button is clicked, getTranslatedName is executed even though no changes have been made to originName

When we bind not click events, but other events that are easier to trigger, such as mouseenter, mouseleave, mousemove, and so on, the function may be called hundreds of times meaninglessly, which may lead to a lot of waste of resources and lead to performance problems.

A little Demo:

Https://stackblitz.com/edit/angular-ivy-4bahvo?file=src/app/app.component.html

In most cases, we can always find alternatives, such as onInit assignment

Import {Component, OnInit} from'@ angular/core';@Component ({selector: 'my-app', templateUrl:'. / app.component.html', styleUrls: ['. / app.component.css'],}) export class AppComponent implements OnInit {originName = 'Hello'; TranslatedName: string; ngOnInit (): void {this.TranslatedName = this.getTranslatedName (this.originName)} getTranslatedName (name: string): string {console.count ('getTranslatedName'); return' hello worldview' } onClick () {console.log ('Button clickedcards');}}

Or use pipe to avoid the article being too long, so I won't go into details.

The above is all the content of the article "what are the reasons why Angular does not call methods in templates?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.