2017-04-13 4 views
0

Ich habe die Auswertung eines Ausdrucks in der Hauptvorlage app.component.html nachverfolgt und festgestellt, dass die Ablaufverfolgung jedes Mal, wenn ich sie aktualisiere oder auf irgendeine Seite klicke, genau 5 Mal angezeigt wird. Ich legte dann eine Ablaufverfolgung in der ngOnInit von app.component.ts und es führt nur einmal wie erwartet aus ... Nur der Ausdruck in der HTML-Datei wird mehrmals aufgerufen!Warum wird ein Ausdruck in meiner app.component.html mehrmals aufgerufen?

Hauptrouten Definitionen:

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

Anfang der HTML-Datei:

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

 

 

 
}

Vielen Dank für jede Hilfe!

+0

mit den Worten "html-Datei namens" meinen Sie die xhr-Anfrage? – happyZZR1400

+1

Der HTML-Code wird nicht mehrmals aufgerufen. Angular muss ermitteln, ob die durch den Klick ausgelöste Aktion den von test() zurückgegebenen Wert geändert hat, sodass der auf der Seite angezeigte Wert aktualisiert wird oder nicht. Genau darum geht es bei der Erkennung von Änderungen, und das ist völlig normal. –

Antwort

3

Sein, wie Angular tut Vorlage Ausdrucksauswertung,

Angular führt Vorlage Ausdrücke nach jeder Änderung Erkennung Zyklus. Änderungserkennungszyklen werden durch viele asynchrone Aktivitäten ausgelöst, wie z. B. Versprechensauflösungen, http-Ergebnisse, Timerereignisse, Tastatureingaben und Mausbewegungen.

Lesen Sie mehr darüber here.

Hoffe das hilft !!

Verwandte Themen