Angular의 ng-content를 사용하여 유연한 구성요소를 생성하는 방법

반응형

개발자로서 우리는 앱의 많은 장소에서 소비되는 구성 요소를 만듭니다.
이러한 시나리오의 주요 문제 중 하나는 개발자/구성 요소가 우리가 다르게 만든 구성 요소를 사용하기를 원한다는 것입니다.

그러나 컨텐츠 프로젝션이라는 것을 사용하여 구성요소를 설계하면 이를 사용하는 개발자와 구성 요소를 보다 유연하게 만들 수 있습니다.

다음 기사에서는 다음에 대해 살펴보겠습니다.

• 콘텐츠 투영이란?
• ng-콘텐츠 태그를 사용하여 콘텐츠를 투영하는 방법
• ng-콘텐츠 태그 및 선택 지시문을 사용하여 여러 콘텐츠를 투영하는 방법.

콘텐츠 투영이란 무엇입니까?

 

ng-콘텐츠 태그를 사용하여 콘텐츠를 투영하는 방법은 무엇입니까?

진행률 표시줄을 나타내는 구성 요소가 있고 내용 투영을 사용하여 진행률 표시줄 설명을 삽입할 수 있다고 가정합니다.

진행률 표시줄 설명을 표시할 진행률 표시줄 구성 요소 내에 ng-콘텐츠 태그를 추가해야 합니다.

이제 진행률 표시줄 구성 요소 태그 안에 ng 내용 태그 대신 표시할 HTML을 추가합니다.

그러면 화면에 다음과 같이 표시됩니다.

 

이제 개발자/구성 요소는 원하는 콘텐츠를 추가할 수 있으며 ng 콘텐츠 태그 대신 구성 요소에 투사되어 진행률 표시줄 구성 요소가 더욱 유연해집니다.

ng-콘텐츠 태그 및 선택 지시문을 사용하여 여러 콘텐츠를 투영하는 방법

이제 진행률 표시줄 구성 요소가 조금 더 유연해졌습니다. 하지만 어떤 이유로든 진행률 표시줄 설명 텍스트를 진행률 표시줄 위가 아니라 앱의 다른 곳에 표시하려는 경우 어떻게 해야 할까요?

이를 실현하려면 여러 ng-콘텐츠 태그로 구성 요소를 설계해야 한다.
그리고 구성 요소가 진행률 표시줄에 대한 설명을 표시할 ng 내용 태그를 알 수 있도록 선택 지시문을 사용할 것입니다.

 

이제 진행률 표시줄 위에 어떤 정보가 표시되도록 하려면 진행률 표시줄 위에 ng 콘텐츠 태그를 만들어야 합니다. 원하는 모든 css 선택기를 허용하는 선택 지시어로 project-on-top이라는 속성을 사용했습니다.

이제 진행률 표시줄 구성 요소는 다음과 같습니다.

진행률 표시줄의 구성 요소를 사용하는 구성 요소는 다음과 같습니다.

그러면 화면에 다음과 같이 표시됩니다.

 

진행률 표시줄 위에 진행률 표시줄 설명을 표시하려면 구성 요소의 태그에 있는 요소에 Project-On-top 속성을 사용합니다.

진행률 표시줄에 진행률 표시줄 설명을 표시하려면 구성 요소의 태그 내 요소에 Project-On-top 속성을 지정하지 않습니다.

기본적으로 콘텐츠 프로젝션을 사용하여 진행률 표시줄 구성 요소를 소비자를 위해 훨씬 더 유연하게 만들었습니다.

이 글을 읽어주셔서 감사드리며 다음 글에서 뵙겠습니다 :)