为什么我的app.component.html中的表达式被多次调用? [英] Why is an expression in my app.component.html called multiple times?

问题描述

我在app.component.html主模板中跟踪了一个表达式的求值，我意识到每次刷新或单击任何页面时，该跟踪都会出现5次. 然后，我在app.component.ts的ngOnInit中放置了一条痕迹，它仅按预期执行一次...仅多次调用html文件中的表达式！

I traced the evaluation of an expression in the app.component.html main template and i realized that the trace appeared exactly 5 times each time i refresh or click any page. I then placed a trace in the ngOnInit of app.component.ts and it executes only once as expected... Only the expression in the html file gets called multiple times !

主要路线定义:

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  //{ path: '',  component: DashboardComponent },
  { path: 'dashboard',  
    component: DashboardComponent,
    canActivate: [AuthGuard], 
    children:[
      {
        path:'main',
        component: DashMainComponent
      },
      {
        path:'config',
        component: DashConfigComponent
      },
      {
        path:'projects',
        component: DashProjectsComponent
      }
    ]
  },
  { path: 'signin',  component: SigninComponent },
  { path: 'signup', component: SignupComponent },
  { path: 'inventory', component: InventoryComponent },
  { path: 'project', component: ProjectComponent },
  { path: 'timesheet', component: TimesheetComponent },
  { path: 'messaging', component: MessagingComponent },
  { path: 'profile', component: ProfileComponent }
];

html文件的顶部:

Top of the html file:

<div id="app">
    {{test}}

app.component.ts:

app.component.ts:

import { Component, OnInit } from '@angular/core';
import {AuthService} from './auth.service';
import { Router, ActivatedRoute } from '@angular/router';
import {Config} from './config.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


  constructor(private authService:AuthService, private router:Router) { }
  ngOnInit(){
    console.log("init");
  }

  get test(){
    console.log("test");
    return "";
  }



}

感谢您的帮助！

推荐答案

Angular如何进行模板表达式求值，

Its how Angular does template expression evaluation,

Angular在每次更改检测后执行模板表达式 循环.变化检测周期是由许多异步事件触发的 活动，例如承诺解决方案，http结果，计时器事件， 按键和鼠标移动.

Angular executes template expressions after every change detection cycle. Change detection cycles are triggered by many asynchronous activities such as promise resolutions, http results, timer events, keypresses and mouse moves.

在这里.

希望这会有所帮助！

这篇关于为什么我的app.component.html中的表达式被多次调用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！