Question

如何在React应用程序中使用6号角分量。

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

谢谢，斯里尼瓦斯

Answer 1

在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步：导出为网络组件

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

如何在应用中使用角度6分量

1 个答案: