Html 为什么函数在我的每个组件中运行两次

我有一个问题，我用布线制作了三个不同的组件。问题是，当我打开不同的组件时，它们会在我打开它们的那一刻循环两次。这是什么原因造成的？我怎样才能消除它

这里有一个示例组件，当我打开它时，

console.log

会运行两次。

import { Component, OnInit } from '@angular/core';   
import nameData from '../../names/names.json'
    
interface INames {
        name: string,
        amount: number
}

const { names } = nameData

@Component({
    selector: 'app-four',
    templateUrl: './four.html',
    styleUrls: ["./four.css"]
})


export class FourComponent {

    nameArray: Array<INames> = names

    constructor() { 
        
    }

    hasName(nameParam: any) {
        console.log("miksi tämä tulee kaksi kertaa")
        
        return this.nameArray.some(elem => elem.name === nameParam)
    }
}

应用程序路由模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OneComponent } from './requirements/one/one';
import { TwoComponent } from './requirements/two/two';
import { ThreeComponent } from './requirements/three/three';
import { FourComponent } from './requirements/four/four';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './header/header';

@NgModule({
  declarations: [
    AppComponent,
    OneComponent,
    TwoComponent,
    ThreeComponent,
    FourComponent,
    HeaderComponent
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

   import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home';
import { FourComponent } from './requirements/four/four';
import { OneComponent } from './requirements/one/one';
import { ThreeComponent } from './requirements/three/three';
import { TwoComponent } from './requirements/two/two';

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'one', component: OneComponent },
  { path: 'two', component: TwoComponent },
  { path: 'three', component: ThreeComponent },
  { path: 'four', component: FourComponent }
]

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我真的很困惑，为什么我一按“组件”按钮它就会循环函数

---

我不建议在HTML模板中使用函数，因为每次Angular的更改检测运行时都会调用函数。Angular无法判断每次修改后函数的结果是否不同，si Angular将在UI中每次发生更改时调用该函数

必须将函数的结果存储在变量中。Angular可以检查变量的引用是否没有更改

您可以在上阅读有关它的更多信息

我建议您执行以下操作

public全名：字符串；
构造函数（）{
this.updateName（）；
}
私有更新名（nameParam:any）{
console.log（“miksi tämätuley kaksi kertaa”）；
this.fullName=this.nameArray.some（elem=>elem.name===nameParam）；
}

{{fullName}

在哪里使用hasName（）函数。如果你在模板中使用

hasName

，那是因为它可以多次渲染。只有在必要时——当您更改输入值时，才应仔细调用此类操作。