如何在 React 应用程序中使用 Angular 6 组件。
我创建了一个角度组件并创建了一个分布式包，我可以在另一个角度项目中使用它，我如何在react js应用程序中使用相同的组件。
谢谢， 斯里尼瓦斯
最佳答案
在 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>关于reactjs - 如何在React应用程序中使用Angular 6组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52365540/