Angular 用于 React 的 ngxextendedpdfviewer

这是不可能的.原因:React和Angular是104.因此，您编写代码，然后他们将其呈现为(对于浏览器)可读的html和javascript.它们还可以做更多的事情:自动刷新、双向绑定、状态管理.

所有这些都是每个框架中的大代码部分.

长话短说:Reaction永远不知道如何处理这未知的angular code.而安吉尔永远不会知道如何处理这一未知的react code.

你不能以这种方式混合它.

一些解决方案

1. 微框架-Web组件.你可以创建带有Angular (read个以上)的网页组件(@angular/elements)，并在你的Reaction应用程序中添加一个网页组件.一个很好的解决方案--但需要一点工作.

Very short example:

create project(先安装Angular CLI！！)

ng new angular-web-component
cd angular-web-component

add Angular elements个

ng add @angular/elements

create a component (which can include the pdf viewer)个

ng generate component my-web-component

add it into 100

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { MyWebComponentComponent } from './my-web-component/my-web-component.component';

@NgModule({
  declarations: [MyWebComponentComponent],
  imports: [BrowserModule],
  entryComponents: [MyWebComponentComponent]
})
export class AppModule {
  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const webComponent = createCustomElement(MyWebComponentComponent, { injector: this.injector });
    customElements.define('my-web-component', webComponent);
  }
}

build the angular project个

ng build --prod --output-hashing none

6. Use in React:

将dist/目录中生成的JS文件添加到您的Reaction项目中.这可以通过在HTML中包含标记或通过其他方式来实现.

然后，您可以在您的Reaction代码中使用Web组件，如下所示:

function App() {
  return (
    <div className="App">
      <my-web-component></my-web-component>
    </div>
  );
}

2. 使用pdf组件构建一个小Angular 的应用程序，构建它，然后将其添加到您的Reaction应用程序中.