1이라고 붙였지만, 2가 있는지는 모르겠습니다.

사건 개요

커스텀의 셀렉트 컴퍼넌트에 키 바인드를 구현했을 때, ↑↓ 키를 사용하면 현재 선택되고 있는 선택사항에 붙이고 있다 selecting 라고 하는 클래스명이 소실되는 사건이 일어났습니다. 키 이벤트의 처리에서는 selecting 클래스 떼어내기의 기준이 되는 변수에는 일절 접하고 있지 않는데, 도대체 왜일까요

사건의 현장

수수께끼 풀고 싶은 사람을 위해 쉽게 재현을 StackBlitz로 만들어 보았습니다. 재현용에 필요 없는 부분을 가능한 한 깎았으므로 컴퍼넌트로서는 여러가지 알레입니다만, 수수께끼 풀기에는 충분하다고 생각합니다. 사건 발생의 경위는 다음과 같습니다.
- 입력을 클릭하면 옵션이 표시됩니다.
- 현재 value로 선택되어 있는 값에는 selected 클래스가 붙어, 하늘색으로 하이라이트 됩니다.
- 옵션 표시 시 ↑↓ 키를 누르면 포커스 되어 있는 선택사항이 밝은 회색 혼합의 하늘색으로 하이라이트됩니다. 하지만 이것을 하면 현재 value로서 선택하고 있는 값 자체에는 변경이 없는데 selected 클래스가 사라져 하늘색의 하이라이트가 없어집니다.

조사 결과

조사를 진행하면, 「일단 [class.XXX]로 기술하고 있던 selecting 클래스의 제어를 {{ XXX }}로 재작성하면 사건은 일어나지 않게 된다」라고 하는 것을 알았습니다. 실제로 현장 StackBlitz에서 그렇게 다시 쓰면 일어나지 않는 것을 볼 수 있습니다. (그 반대로 focus의 클래스 지정을 클래스 바인딩으로 해도 제대로 움직입니다.)
그러나 해결 방법은 알았지만 원인을 전혀 모르기 때문에 조사를 계속하기로 결정합니다. 보통 검색하려고 해도, 좀처럼 요구하고 있는 대답에는 부딪히지 않습니다. 그래서 직접 angular의 리포지토리의 issue에서 「interpolation class」로 노리려고 하기로 했습니다. 그리고 마침내 대답을 찾을 수있었습니다.

진상

클래스명이 사라져 버리는 것은, 「interpolation에 의한 클래스명의 부여는 클래스리스트 전체를 바인드 하기 (위해)때문에,ChangeDetection가 달려 클래스리스트가 재설정되었을 때, 프로그램으로부터 부여한 클래스명이 사라진다」로부터였습니다.
실제로 그 부분만 시도하고 싶다고 하는 사람을 위해서, 미니멀 StackBlitz를 만들었습니다. IMPORTANT를 누른 후 COLOR를 누르면, IMPORTANT에 의해 부여된 클래스(및 그 클래스에 부수하는 스타일)가 사라지는 것을 알 수 있습니다.

결론

클래스 바인딩 [class.XXX] 과 interpolation {{ XXX }} 에서의 클래스명의 부여는 병용하지 않는 것이 제일. 어느 쪽이든
일반적으로는 미니멀레포와 같이, 변수명을 그대로 클래스에 사용하고 싶을 때가 interpolation의 차례로, 클래스 바인딩과는 미묘하게 사용하고 싶을 때가 다르다고 생각하므로 혼합하고 싶을 때가 적지 않다고는 생각합니다 . 다만, ChangeDetection을 완전 파악해 영향이 없도록 설정할 수 있다면 이야기는 다르지만, 인간의 머리에서는 어려운 생각이 듭니다.
상관 없습니다만, 나는 포맷 걸었을 때에 어쩐지 보기 쉽기 때문에 클래스 바인딩에 가지런히 하는 편을 좋아합니다.