js 함수를 사용하여 Angular의 HTML에서 텍스트 서식을 지정하지 마세요. 대신 이 파이프를 사용하십시오.

getModifiedText()라는 함수와 보간이 있는 템플릿이 있는 구성 요소의 기본 예제를 고려하십시오.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'dummy-angular-app';

  constructor() { }

  getModifiedText(text: string) {
    console.log("🚀 ~ getModifiedText")
    return text.toUpperCase()
  }
}

<p> {{ getModifiedText('😯 JS Functions') }} </p>

콘솔의 출력을 추측할 수 있습니까?
힌트: getModifiedText() 내부에 console.log가 있습니다.

템플릿에서 함수를 한 번만 호출하더라도 콘솔을 보면 한 번 이상 호출하게 됩니다. ( 4 번 )



getModifiedText() 함수는 Angular가 구성 요소에 대한 변경 감지를 실행할 때마다 호출됩니다.

이는 DOM 업데이트가 변경 감지의 일부이고 Angular가 DOM 업데이트에 사용할 값을 알기 위해 getModifiedText()를 호출해야 하기 때문입니다.

그리고 변경 감지 주기는 매우 자주 실행될 수 있습니다. Learn more about change detection

그러나 JS를 추가로 사용하면 앱이 상당히 커질 때 처리 능력이 저하될 수 있습니다.

따라서 Angular Pipes의 역할이 있습니다.

capitalize라는 각도 파이프 만들기(각도 앱 내부에 있는지 확인)

ng generate pipe capitalize

지연 로딩 또는 다른 모듈을 사용하는 경우 해당 module.ts 선언에 항목을 입력해야 합니다.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize'
})

export class CapitalizePipe implements PipeTransform {

  transform(text: string): string {
    console.log("🚀 ~ CapitalizePipe")
    return text.toUpperCase()
  }

}

이제 템플릿에서

<p> {{ '😌 Angular Pipe' | capitalize }}</p>

파이프에 콘솔이 있고 콘솔을 열면 하나의 로그만 볼 수 있습니다.



텍스트 형식인 경우 항상 Angular Pipes를 사용하여 javascript 사용을 줄입니다. 더 보기Angular Pipes

그리고 이런 종류의 작은 글이 마음에 든다면 저를 팔로우하는 것을 잊지 마세요. 글을 더 많이 쓰고 오픈 소스에 기여하도록 동기를 부여합니다.

🕊 평화!

나에게서 더 많은 무료 기사!

🙅🏼‍♀️ Nodejs + MongoDb를 시작할 때 저지른 실수

Shrihari Mohan ・ 6월 4일 ・ 3분 읽기

#webdev #javascript #node #beginners

🤓 try/catch 없이 expressJs에서 비동기 오류 처리!

Shrihari Mohan ・ 6월 11일 ・ 3분 읽기

#webdev #javascript #node #beginners

😑 Angular를 시작할 때 저지른 실수(모든 웹 프레임워크에 적용됨)

Shrihari Mohan ・ 5월 27일 ・ 2분 읽기

#javascript #webdev #angular #beginners