Как интегрировать элементы Nuxeo Polymer 3 в угловое приложение? - PullRequest
Новая
       32

Как интегрировать элементы Nuxeo Polymer 3 в угловое приложение?

0 голосов
/ 30 апреля 2019

Я создал приложение Angular 6, и мне нужно включить мои элементы Nuxeo Polymer 3 (например, этот https://github.com/nuxeo/nuxeo-elements/blob/master/core/nuxeo-search.js).

Как я могу получить что-то вроде: 

<app>
   <dom-bind>
      <template>
        <nuxeo-connection
          id="nx"
          url="http://localhost:8080/nuxeo"
          username="Administrator"
          password="Administrator"
        ></nuxeo-connection>
        <nuxeo-search auto searches="{{searches}}"></nuxeo-search>
        <div class="container" class="layout vertical center">
          <template is="dom-repeat" items="{{searches}}">
            <div class="card">
              <div class="prop">
                <label class="propName">id:</label>
                <label class="propValue">[[item.id]]</label>
              </div>
            </div>
          </template>
        </div>
      </template>
    </dom-bind>
</app>

1 Ответ

0 голосов
/ 29 мая 2019

Через некоторое время я могу ответить на мой вопрос, как объяснил здесь .Вкратце:

  1. Включение JS in angular в tsconfig.json: { compilerOptions: { "allowJs": true }}
  2. Включение схемы пользовательских элементов в модуле приложения: import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; ... @NgModule({<br> ... schemas: [CUSTOM_ELEMENTS_SCHEMA],<br> ... })
  3. npm install ваши компоненты
  4. Используйте <nuxeo-connection> в файле index.html перед любым угловым дайджестом
  5. Наконец, в вашем app.component.html затем используйте ваши любимые веб-компоненты :) 

<nuxeo-document-suggestion
        [router]="router"
        (selected-item-changed)="select($event.detail.value)"
        placeholder="Select a document">
</nuxeo-document-suggestion>

<div *ngIf="doc">
  <nuxeo-page-provider #pp
                     auto
                     provider="advanced_document_content"
                     enrichers="thumbnail"
                     page-size="5"
                     [params]="params"
                     (current-page-changed)="onResults($event.detail.value)">
  </nuxeo-page-provider>
</div>

Cherry on the cake, веб-компоненты Nuxeo доступны для угловых, но также React и Vue.js.Круто!

...