Question

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

主要路线定义：

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文件的顶部：

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

感谢您的帮助！

Answer 1

Angular如何进行模板表达式评估，

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

详细了解here。

希望这会有所帮助!!

为什么我的app.component.html中的表达式被多次调用？

1 个答案: