Angular

A Wink komponensek maguk Angular Elemei — természetesen integrálódnak Angular alkalmazásokba. Az egyetlen szükséges beállítás, hogy az Angular fordítójának megmondjuk, hogy engedélyezze az ismeretlen elemneveket.

@wink/elements npm csomag Telepítse és töltse be a CDN csomagot TypeScript típusokkal.

Telepítés

npm install @wink/elements

Bootstrap — CDN betöltése egyszer

Hívja meg a load() függvényt a bootstrapApplication előtt (vagy az APP_INITIALIZER-ben):

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);

Egyedi elemnevek engedélyezése

Adja hozzá a CUSTOM_ELEMENTS_SCHEMA-t minden önálló komponenshez (vagy modulhoz), amely <wink-*> tageket renderel:

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';
}

Attribútumok kötése

Az Angular sablon szintaxisa közvetlenül működik az egyedi elemek string attribútumaival:

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

<!-- Dinamikus kötés -->
<wink-content-loader [attr.layout]="layout" [attr.id]="layoutId" />

Használja az [attr.name] kötést, ha az érték dinamikus — az Angular szokásos [property] kötése a DOM tulajdonságokat célozza, nem a HTML attribútumokat, amelyekre az egyedi elemek támaszkodnak.

Környezeti változók

@angular/cli 16+ projektekhez használja az environment.ts fájlt vagy az NG_APP_* előtagot az @ngx-env/builder-rel:

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

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

TypeScript típusok

Az @wink/elements csomag exportálja az összes komponens attribútumának típusait:

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

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