Импорт модуля Angular 6 в React
Шаг 1. Настройка AppModule для экспорта в виде веб-компонента из LoginComponent
@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: определить параметры для передачи компоненту в реакции
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