Angular

Wink 컴포넌트는 자체적으로 Angular Elements입니다 — Angular 애플리케이션에 자연스럽게 통합됩니다. 필요한 설정은 Angular 컴파일러에 알 수 없는 요소 이름을 허용하도록 지시하는 것뿐입니다.

@wink/elements npm 패키지 TypeScript 타입과 함께 CDN 번들을 설치하고 로드하세요.

설치

npm install @wink/elements

부트스트랩 — CDN 한 번 로드하기

bootstrapApplication 호출 전에 (또는 APP_INITIALIZER 내부에서) load()를 호출하세요:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './portal/app.component';
import { load } from '@wink/elements';

load({ clientId: import.meta.env['NG_APP_WINK_CLIENT_ID'] });

bootstrapApplication(AppComponent).catch(console.error);

커스텀 요소 이름 허용하기

<wink-*> 태그를 렌더링하는 모든 독립형 컴포넌트(또는 모듈)에 CUSTOM_ELEMENTS_SCHEMA를 추가하세요:

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

@Component({
  selector: 'app-hotels',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <wink-content-loader layout="HOTEL" [id]="layoutId" />
    <wink-lookup />
  `,
})
export class HotelsComponent {
  layoutId = 'YOUR_LAYOUT_ID';
}

속성 바인딩

Angular 템플릿 문법은 커스텀 요소의 문자열 속성과 직접 작동합니다:

<!-- 정적 -->
<wink-content-loader layout="HOTEL" id="abc123" />

<!-- 동적 바인딩 -->
<wink-content-loader [attr.layout]="layout" [attr.id]="layoutId" />

값이 동적일 때는 [attr.name] 바인딩을 사용하세요 — Angular의 일반 [property] 바인딩은 DOM 속성을 대상으로 하며, 커스텀 요소는 HTML 속성에 의존합니다.

환경 변수

@angular/cli 16+ 프로젝트에서는 environment.ts 또는 NG_APP_* 접두사를 @ngx-env/builder와 함께 사용하세요:

export const environment = {
  winkClientId: 'YOUR_CLIENT_ID',
};

import { environment } from './environments/environment';
load({ clientId: environment.winkClientId });

TypeScript 타입

@wink/elements 패키지는 모든 컴포넌트 속성에 대한 타입 인터페이스를 내보냅니다:

import type { WinkContentLoaderAttributes, WinkLayout } from '@wink/elements';

const attrs: WinkContentLoaderAttributes = {
  layout: 'HOTEL' as WinkLayout,
  id: 'abc123',
};