如何在 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

一段时间后，我可以像解释的那样回答我的问题here。简而言之：

在 tsconfig.json 中的 angular 中启用 JS :

{
  compilerOptions: {
    "allowJs": true
  }
}

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

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

npm install 你的组件
在 index.html 文件中的任何 angular 摘要之前使用 <nuxeo-connection>
最后 - 在你 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>

蛋糕上的樱桃，Nuxeo 网络组件可用于 angular，还有 React 和 Vue.js。

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

How to integrate nuxeo polymer 3 elements in angular app?

nuxeo

angular

polymer-3.x