爲什麼我的app.component.html中的表達式被多次調用？

我跟蹤了app.component.html主模板中表達式的評估，並且我意識到每次刷新或單擊任何頁面時跟蹤都會出現5次。然後，我在app.component.ts的ngOnInit中放置一個跟蹤，並且它只執行一次，如預期的那樣...只有html文件中的表達式被多次調用！爲什麼我的app.component.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 ""; 
 
    } 
 

 

 

 
}

感謝您的幫助！

來源

2017-04-13 Tuthmosis

通過說「html文件調用」您的意思是xhr請求？ – happyZZR1400

該html未被多次調用。 Angular需要確定點擊觸發的操作是否改變了test（）返回的值，以便刷新頁面中顯示的值。這就是變化檢測的全部內容，而且這很正常。 –

它如何角做模板表達式求值，

角的每一個變化檢測週期後執行模板表達式。更改檢測週期由許多異步活動觸發，如承諾分辨率，http結果，計時器事件，按鍵和鼠標移動。

查看更多關於here。

希望這有助於！

來源

2017-04-13 21:04:51

爲什麼我的app.component.html中的表達式被多次調用？

回答

相關問題