时间戳

首页 > 解决方案 > 如何在反应应用程序中使用 Angular 6 组件

reactjs - 如何在反应应用程序中使用 Angular 6 组件

问题描述

如何在反应应用程序中使用 Angular 6 组件。

我创建了一个角度组件并创建了一个分布式包，我可以将它用于另一个角度项目，我如何在反应 js 应用程序中使用相同的组件。

谢谢， 斯里尼瓦斯

标签： reactjsangular6

解决方案

在 React 中导入 Angular 6 模块

第 1 步：配置 AppModule 以从 LoginComponent 导出为 Web 组件

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

  }

  ngDoBootstrap() {
    const el = createCustomElement(LoginComponent, { injector: this.injector });
    customElements.define('ng-login', el);
   }
}

第 2 步：配置组件

@Component({
  selector: 'ng-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  encapsulation: ViewEncapsulation.Native
})
export class LoginComponent {
  @Input() username = '';
  @Input() password = '';

  @Output('login') login = new EventEmitter<any>();

  constructor() { }

  doLogin() {
    let user = {
      "username": this.username,
      "password": this.password
    };
    this.login.emit(user)
    console.log('emitting event');
  }
}

第 3 步：导出为 Web 组件

ng build --prod --output-hashing none

第 3 步：从 dist/ng-login 文件夹中复制以下三个文件并粘贴到 ng-elements 文件夹中

runtime.js
polyfills.js
main.js"

第 4 步：打开 index.html 并添加三个文件

 <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>

    <div id="root"></div>

    <script type="text/javascript" src="./ng-elements/runtime.js"></script>
    <script type="text/javascript" src="./ng-elements/polyfills.js"></script>
    <script type="text/javascript" src="./ng-elements/main.js"></script>
    
  </body>

第5步：定义参数以传递给react中的组件

constructor(props){
    super(props)
    this.state = {username:'default-username', password:'default-password'}
  }

第 6 步：添加元素

<ng-login ref={elem => this.nv = elem} username={this.state.username} password={this.state.password}></ng-login>

第 7 步：订阅事件

componentDidMount() {
    this.nv.addEventListener("login", this.handleNvEnter);
  }

  componentWillUnmount() {
    this.nv.removeEventListener("login", this.handleNvEnter);
  }

第 8 步：显示结果

<div>
  User Name: {this.state.username}
</div>
<div>
  password: {this.state.password}
</div>

参考：https ://medium.com/@balramchavan/integrate-import-angular-v6-component-s-inside-react-js-applications-da5cc03107b4

推荐阅读