Angular에서 콘텐츠 프로젝션 단순화

Content projection을 사용하면 컴포넌트에 shadow DOM을 삽입할 수 있습니다. 간단히 말해서, 구성 요소에 HTML 요소 또는 기타 구성 요소를 삽입하려면 콘텐츠 프로젝션 개념을 사용하여 이를 수행합니다. Angular 에서는 ng-content >< /ng-content >를 사용하여 콘텐츠 프로젝션< 달성합니다.콘텐츠 프로젝션을 올바르게 사용하여 재사용 가능한 구성 요소와 확장 가능한 응용 프로그램을 만들 수 있습니다.

콘텐츠 프로젝션을 이해하기 위해 아래 코드 목록과 같이 GreetComponent를 고려해 보겠습니다.

import { Component } from '@angular/core';
 
@Component({
    selector: 'greet',
    template: `{{message}}`
})
export class GreetComponent {
 
    message: string = "Hello There !"
 
}

이제 다른 컴포넌트에서 GreetComponent를 사용하고 부모 컴포넌트에서 인사말 메시지를 전달하려면 @Input() 데코레이터를 사용해야 합니다. 이렇게 하면 수정된 GreetComponnet이 아래 목록과 같이 표시됩니다.

import { Component, Input } from '@angular/core';
 
@Component({
    selector: 'greet',
    template: `{{message}}`
})
export class GreetComponent {
 
    @Input() message: string;
 
}

@Input() 데코레이터를 사용하면 간단한 문자열을 GreetComponnet에 전달할 수 있지만 다음과 같이 GreetComponent에 다른 유형의 데이터를 전달해야 하는 경우에는 어떻게 해야 합니까?

1. Inner HTML
2. HTML Elements
3. 스타일이 지정된 HTML
4. 다른 구성 요소 등

스타일이 지정된 HTML 또는 다른 구성 요소를 전달하거나 프로젝트하려면 콘텐츠 프로젝션이 사용됩니다. 이 코드에서 콘텐츠 프로젝션을 사용하도록 GreetComponent를 수정해 보겠습니다.

GreetComponent에서 콘텐츠를 프로젝션하는 데 사용하고 있습니다. GreetComponent를 사용할 때 아래와 같이 콘텐츠를 전달합니다.

위의 목록에서는 스타일이 지정된 HTML을 GreetComponent에 프로젝션하고 있으며 다음과 같은 출력을 얻을 수 있습니다.

다음은 단일 슬롯 콘텐츠 프로젝션의 예시입니다. GreetComponent에 전달하는 모든 것이 투영됩니다. 따라서 아래 목록과 같이 GreetComponent에 두 개 이상의 HTML 요소를 전달해 보겠습니다.

여기서 우리는 세 개의 HTML 요소를 GreetComponent에 전달하고 있으며 모두 프로젝션됩니다. 아래 이미지와 같이 출력을 얻을 수 있습니다.

DOM에서 GreetComponent 내부에 모든 HTML 요소가 투영된 것을 볼 수 있습니다.

멀티 슬롯 프로젝션

구성 요소의 여러 슬롯에 요소를 프로젝션해야 하는 요구 사항이 있을 수 있습니다. 다음 예에서는 다음과 같은 인사말 카드를 만들려고 한다고 가정해 보겠습니다.

아래와 같이 구성 요소를 사용하여 만들 수 있습니다.

이름과 버튼이 GreetComponent에 동적으로 전달될 수 있도록 헤더 요소와 btn 요소를 전달해야 하는 요구 사항이 있다고 가정해 보겠습니다.  이번에는 두 개의 슬롯이 필요합니다.

1. 헤더 요소에 대한 슬롯
2. btn 요소에 대한 슬롯

아래 이미지와 같이 위의 요구 사항을 충족하도록 GreetComponent를 수정해 보겠습니다.

여기서 우리는 ng-content를 두 번 사용하고 있습니다. 이제 문제는 h1 요소를 프로젝션하기 위해 특정 ng-content를 선택하고 btn 요소를 프로젝션하기 위해 다른 ng-content를 선택합니까?

​ng-content > 선택기를 사용하여 프로젝션을 위한 특정 슬롯을 선택할 수 있습니다.  선택기에는 다음과 같은 네 가지 유형이 있습니다.

1. 태그 선택기를 사용한 프로젝트
2. 클래스 선택기를 사용한 프로젝트
3. id 선택기를 사용한 프로젝트
4. 속성 선택기를 사용한 프로젝트

아래 목록에 표시된 것처럼 다중 슬롯 프로젝션을 위해 태그 선택기를 사용할 수 있습니다.

다음으로, 아래 목록과 같이 GreetComponent에 콘텐츠를 프로젝션할 수 있습니다.

보시다시피 GreetComponent를 두 번 사용하고 다른 h1 및 button 요소를 투영하고 있습니다. 아래 이미지와 같이 출력을 얻을 수 있습니다.

태그 선택기를 사용할 때의 문제는 모든 h1 요소가 GreetComponent에 투영된다는 것입니다. 많은 시나리오에서는 이를 원하지 않을 수 있으며 아래 목록과 같이 클래스 선택기 또는 속성 선택기와 같은 다른 선택기를 사용할 수 있습니다.

다음으로, 아래 목록과 같이 GreetComponent에 콘텐츠를 프로젝션할 수 있습니다.

위와 동일한 출력을 얻을 수 있지만 이번에는 클래스 이름과 속성을 사용하여 내용을 프로젝션합니다. DOM에서 요소를 검사하면 아래 이미지와 같이 프로젝션된 요소의 속성 이름과 클래스 이름을 찾을 수 있습니다.

콘텐츠 프로젝션은 구성 요소에 shadow DOM을 삽입하는 데 매우 유용합니다. 구성 요소에 HTML 요소 또는 기타 구성 요소를 삽입하려면 콘텐츠 프로젝션을 사용해야 합니다. AngularJS 1.X에서는 Transclusion을 사용하여 콘텐츠 프로젝션을 수행했지만 Angular 에서는 < ng-content를 사용하여 구현되었습니다>

다음 게시물에서는 Angular의 더 중요한 개념에 대해 배울 것이므로 계속 지켜봐 주십시오. 또한 HTML5, Angular, React 및 ASP.NET MVC와 함께 사용하여 풍부한 인터넷 응용 프로그램을 만들 수 있는 JavaScript/HTML5 및 ASP.NET MVC 대한 Ignite UI 확인하는 것을 잊지 마십시오. 모든 JavaScript 컨트롤의 평가판을 무료로 다운로드할 수 있습니다!