첫 번째 Angular 요소를 만들기 위한 단계별

첫 번째 Angular 요소를 만들기 위한 단계별

Angular Elements를 사용하면 Angular 앱 외부에서 사용할 수 있는 재사용 가능한 Angular 컨트롤을 만들 수 있습니다. 첫 번째 요소를 만드는 방법을 알아보세요.

4min read

Angular Elements를 사용하면 Angular 애플리케이션 외부에서 사용할 수 있는 재사용 가능한 Angular 구성 요소를 만들 수 있습니다. Angular Element는 일반 HTML, React 등과 같은 다른 응용 프로그램에서 사용할 수 있습니다.  기본적으로 Angular Elements는 Custom Elements로 패키징된 일반 컴포넌트입니다. 사용자 지정 요소에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

Angular 요소는 재사용 가능한 구성 요소로, Angular 외부에서 사용할 수 있습니다.  다음에 대해 자세히 알아볼 수 있습니다.

이 게시물에서는 작업을 단순하게 유지하고 단계별로 기본 Angular 요소를 만드는 방법을 배웁니다. 자, 시작하겠습니다.

Step 1: Installation

CLI를 사용하여 새 프로젝트 만들기 Angular

ng new demo1

프로젝트가 생성되면 디렉토리를 demo1로 변경하고 Angular Elements를 설치합니다. 이를 위해 아래와 같이 npm 명령을 실행합니다.

npm install @angular/elements

이전 브라우저로 작업하려면 폴리필이 필요합니다. 따라서 아래와 같이 설치해 보겠습니다.

npm install @webcomponents/custom-elements

polyfill을 설치한 후 polyfills.ts 파일을 열고 다음 두 항목을 추가합니다.​

import '@webcomponents/custom-elements/src/native-shim';
import '@webcomponents/custom-elements/custom-elements.min';

2단계: 구성 요소 만들기

이 단계에서는 Angular Element로 사용되는 재사용 가능한 구성 요소를 만듭니다.

import { Component, Input } from '@angular/core';
 
  @Component({
      selector: 'app-message',
      template: `
 <h1 style='text-center'>{{title}}</h1>
  <h2>hey {{name}} loving Angular Elements {{answer}}</h2>
`,
      styles: ['h2 {color:red;}']
  })
  export class MessageComponent {
      title = 'Angular Elements';
      @Input() name: string;
      @Input() answer: string;
  }

MessageComponent는 @Input() 데코레이터로 데코레이팅된 두 개의 속성이 있는 매우 간단한 구성 요소입니다.

3단계: 구성 요소 등록

Angular Element로 사용할 구성 요소를 등록하려면 다음 작업을 수행해야 합니다.

  • 구성 요소 가져오기를 클릭합니다.
  • Pass it in declarations array.
  • entryComponents 배열에 구성 요소를 전달합니다.
  • 부트스트랩 배열에 어떤 구성 요소도 전달하지 마십시오.
import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { MessageComponent } from './message.component';
 
 @NgModule({
     declarations: [
         MessageComponent
     ],
     imports: [
         BrowserModule
     ],
     providers: [],
     bootstrap: [],
     entryComponents: [MessageComponent]
 })
 export class AppModule {
 
 }

사용자 정의 요소를 부트스트랩할 필요가 없습니다. DOM에 추가될 때 자동으로 생성되고 DOM에서 제거될 때 파괴되지만 어떻게든 생성되어야 하므로 entryComponents 배열에 추가하고 있습니다. 동적 구성 요소에서 이 속성을 알고 있어야 합니다.

4단계: 구성 요소에서 요소 만들기

Angular Component에서 사용자 정의 요소를 생성하려면 createCustomElement를 호출해야 합니다. 이렇게 하려면 먼저 angular.module.ts에서 다음 항목을 가져옵니다

import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';

AppModule에서 필요한 모듈을 가져온 후 아래 목록과 같이 사용자 지정 요소를 만들어야 합니다. 또한 ngDoBootstrap을 수동으로 호출하고 있습니다.

export class AppModule {
 
      constructor(private injector: Injector) {
          const customElement = createCustomElement(MessageComponent, { injector });
          customElements.define('app-message', customElement);
      }
 
      ngDoBootstrap() {
 
      }
  }

Step 5: Use Custom Element

이상적으로는 모든 외부 html 파일에서 사용자 정의 요소를 사용합니다. 추가 기사에서 이에 대해 다룰 것입니다. 동일한 각도 응용 프로그램의 index.html에서 생성 된 사용자 정의 요소를 사용하려면 아래와 같이 body에 배치하십시오.

<body>
        <!-- <app-root></app-root> -->
        <app-message name="dj" answer="yes"></app-message>
</body>

이제 ng serve 명령을 사용하여 응용 프로그램을 실행하면 아래 이미지와 같이 사용자 지정 요소가 렌더링됩니다.

ng serve 명령을 사용하는 응용 프로그램이며 사용자 정의 요소가 렌더링되어야합니다.

따라서 Angular Custom Element로 작업하려면 다음 단계를 수행해야 한다는 결론을 내릴 수 있습니다.

  1. Install @angular/elements
  2. 구성 요소 만들기
  3. entryComponent에 구성 요소 등록
  4. Invoke createElement to create custom element
  5. html에서 사용

이 게시물이 도움이 되었기를 바랍니다. 읽어 주셔서 감사합니다.  이 게시물이 마음에 들면 공유해주세요. 또한 Infragistics Ignite UI for Angular 구성 요소를 체크아웃하지 않았다면 체크아웃하십시오! 웹 앱을 더 빠르게 코딩하는 데 도움이 되는 30+ 재료 기반 Angular 구성 요소가 있습니다.

Angular
데모 요청