angular - 如何在 Angular 应用程序中集成 nuxeo 聚合物 3 元素？

Question

我已经构建了一个 Angular 6 应用程序，我需要包含我的 Nuxeo Polymer 3 Elements（比如这个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>

Answer 1

一段时间后，我可以像解释这里一样回答我的问题。简单来说：

1. 在 tsconfig.json 中启用 JS：

{
  compilerOptions: {
    "allowJs": true
  }
}

2. 在您的应用模块中启用自定义元素架构：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
@NgModule({   
...
schemas: [CUSTOM_ELEMENTS_SCHEMA],   
...
})

3. npm install你的组件
4. <nuxeo-connection>在任何角度摘要之前在 index.html 文件中使用 a
5. 最后 - 在你的 app.component.html 中使用你的 web 组件

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

锦上添花，Nuxeo Web 组件可用于 Angular，也可用于 React 和 Vue.js。