如何在 React 应用程序中使用 angular 6 组件。
我创建了一个 angular 组件并创建了一个分布式包，我可以在另一个 angular 项目中使用它，我如何在 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"第四步：打开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>第七步：订阅事件
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
| 归档时间： |
|
| 查看次数： |
5064 次 |
| 最近记录： |