如何在 angular 6 中添加 React 自定义元素

Question

我创建了一个 React 应用程序并将其定义为自定义元素。 customElements.define('react-iis', ReactElement); 我已经构建了这个应用程序并获得了 js 文件我直接在普通 html 文件中使用这个元素，它工作正常但是我如何从 angular component/html?

调用这个元素

在 Basic html 中，我导入了构建后获得的 React js 文件并使用了 <react-iis></react-iis> 它有效

<html>
<body>
<react-iis></react-iis>
<script type="text/javascript" src="../../reactelementsbuild/build/static/js/2.8490447d.chunk.js"></script>
  <script type="text/javascript" src="../../reactelementsbuild/build/static/js/main.1cd38f24.chunk.js"></script>
  <script type="text/javascript" src="../../reactelementsbuild/build/static/js/runtime~main.a8a9905a.js"></script>
</body>
<html>

任何人都可以帮助从 angular 组件

做同样的事情吗

Answer 1

在 Angular 中，您必须在 angular.json 中导入 .js 文件。（您甚至可以将这些文件合并为一个，然后只需导入一个而不是三个）

"scripts": [
  "src/assets/react-component/2.8490447d.chunk.js",
  "src/assets/react-component/main.1cd38f24.chunk.js",
  "src/assets/react-component/runtime~main.a8a9905a.js"
]

之后，您必须让 Angular 知道您将使用非 angular 元素/应用程序未知的元素 - CUSTOM_ELEMENTS_SCHEMA

app.module.ts

@NgModule({
  ....
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

现在您可以像在 React 应用程序中一样使用您的 React 自定义元素了 - 通过使用 <react-iis></react-iis>

如何在 angular 6 中添加 React 自定义元素

How to add react custom element in angular 6

reactjs

custom-element

angular

angular6

angular-elements