템플릿 문자열 바인딩에서는 시그널을 호출해야 합니다

이 진단은 템플릿 문자열 바인딩에서 호출하지 않은 시그널을 감지합니다.

import {Component, signal, Signal} from '@angular/core';

@Component({
  template: `<div>{{ mySignal }}</div>`,
})
class MyComponent {
  mySignal: Signal<number> = signal(0);
}

무엇이 문제인가요?

Angular 시그널은 인수가 없는 함수(() => T)입니다. 실행하면 시그널의 현재 값을 반환합니다. 따라서 템플릿 문자열 바인딩으로 시그널 값을 렌더링하려면 시그널을 호출해야 합니다.

어떻게 해결하나요?

템플릿 문자열 바인딩에서 시그널 값을 렌더링하려면 시그널을 호출하세요.

import {Component, signal, Signal} from '@angular/core';

@Component({
  template: `<div>{{ mySignal() }}</div>`,
})
class MyComponent {
  mySignal: Signal<number> = signal(0);
}

필수 설정

확장 진단이 발생하려면 strictTemplates를 활성화해야 합니다. interpolatedSignalNotInvoked에는 strictTemplates 외의 추가 요구 사항이 없습니다.

이 상황을 피할 수 없다면 어떻게 하나요?

프로젝트의 tsconfig.json 파일을 수정하여 이 진단을 비활성화할 수 있습니다.

{
  "angularCompilerOptions": {
    "extendedDiagnostics": {
      "checks": {
        "interpolatedSignalNotInvoked": "suppress"
      }
    }
  }
}

자세한 내용은 확장 진단 설정을 참고하세요.