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

问题描述

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

主要路线定义:

const 路由:Routes = [{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },//{ 路径: '', 组件: DashboardComponent },{路径:'仪表板'，组件:仪表板组件，canActivate: [AuthGuard],孩子们:[{路径:'主要'，组件:DashMainComponent},{路径:'配置'，组件:DashConfigComponent},{路径:'项目'，组件:DashProjectsComponent}]},{ path: 'signin', 组件: SigninComponent },{ path: 'signup', 组件: SignupComponent },{路径:'库存'，组件:库存组件}，{路径:'项目'，组件:项目组件}，{ path: 'timesheet', 组件: TimesheetComponent },{路径:'消息'，组件:消息组件}，{ 路径:'配置文件'，组件:ProfileComponent }];

html 文件的顶部:

{{test}}

app.component.ts:

import { Component, OnInit } from '@angular/core';从 './auth.service' 导入 {AuthService}；从@angular/router"导入{路由器，激活路由}；从 './config.service' 导入 {Config}；@成分({选择器:'app-root'，templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent 实现 OnInit {构造函数(私有authService:AuthService，私有路由器:路由器){}ngOnInit(){console.log("init");}得到测试(){控制台日志(测试")；返回 "";}}

感谢您的帮助！

解决方案

Angular 如何做模板表达式求值，

<块引用>

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

阅读更多相关信息此处.

希望这有帮助！！

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 !

Main routes definitions:

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 }
];

Top of the html file:

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

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 "";
  }



}

Thanks for any help !

解决方案

Its how Angular does template expression evaluation,

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.

Read more about it here.

Hope this helps!!

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