2
私は反応成分のセットを持っています。私は角度2のアプリケーションでそれらを使用しようとしています。ここで角度2の反応成分の使用
メインは私は、次のファイルを持っている私の角度のプロジェクトで今
import React, {Component} from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import MyCardContainer from './containers/MyCardContainer';
import './assets/style/main.css';
export default class MyCard extends Component {
constructor(props){
super(props);
}
componentWillMount(){
}
render(){
if(this.props.param1 && this.props.param2) {
return (
<Provider store={configureStore()}>
<MyCardContainer param1={this.props.param1} param2={this.props.param2} key='container'/>
</Provider>
)
}
else{
return(
<div>
Invalid Params are provided for MyCard Component !!
</div>
)
}
}
}を使用しようとしていますコンポーネントを反応させるのです。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyCardHostComponent } from './mycardhost.component';
@NgModule({
declarations: [
AppComponent,
MyCardHostComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}app.component.html
<div style="text-align:center">
<h1>
Welcome to React Components Usage Page
</h1>
<div>
<my-card-host></my-card-host>
</div>
<div id="my-card"></div>
</div>そしてmycardhost.component.ts
私はのOnInitとAfterContentInitの両方を試してみました。私は与えられた時間に1つしか活動しなかった。持っている最初のテンプレートで私は
import {Component, ViewChild,ElementRef,AfterContentInit} from '@angular/core';
import {MyCard} from './MyCard';
@Component({
selector: 'my-card-host',
templateUrl:"./mycardhost.component.html"
})
export class MyCardHostComponent implements OnInit, AfterContentInit{
@ViewChild('my-card') myCard: ElementRef;
ngOnInit(){
// MyCard.initialize("param1val","param2val",document.getElementById("my-card"));
}
ngAfterContentInit(){
RepCard.initialize("param1val","param2val",this.myCard.nativeElement
);
}
}に持っている「私のカード」idを持つdiv要素（およびmycardhost.component.html用テンプレートファイルを持っていませんでしたインクルードは、コンポーネントがロードされますリアクトID "私のカード" とdivタグ。
<div id="my-card">
</div>そして、私がアプリを実行すると、React StoreとReducersが初期化されています。どのように私は、次のエラーを取得しています：document.getElementById（）は、私が渡していることを示している有効なDOM要素ではありません。
角度コンポーネントにブレークポイントを入れようとしましたが、どれも実行されていません。私が間違っていることを確認していない。本当に助けていただければ幸いです。
Uncaught ZoneAwareError {__zone_symbol__error: Error: _registerComponent(...): Target container is not a DOM element.
at invariant (eval at <an…, …}
Target container is not a DOM element. at invariant (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:39:15) [<root>] at Object._registerComponent (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:447:200) [<root>] at Object._renderNewRootComponent (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:470:34) [<root>] at Object.wrapper [as _renderNewRootComponent] (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:66:21) [<root>] at Object._renderSubtreeIntoContainer (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:550:32) [<root>] at render (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:570:23) [<root>] at wrapper (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:66:21) [<root>] at eval (eval at <anonymous> (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1)), <anonymous>:54:22) [<root>] at Object.eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:607:2) [<root>] at __webpack_require__ (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:557:30) [<root>] at fn (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:88:20) [<root>] at Object.eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:588:19) [<root>] at __webpack_require__ (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:557:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:580:37) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:1873:1), <anonymous>:583:10) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:1873:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:732:1), <anonymous>:8:27) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:732:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:760:1), <anonymous>:7:17) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:760:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:746:1), <anonymous>:13:31) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:746:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at eval (eval at <anonymous> (http://localhost:8080/js/app.js:712:1), <anonymous>:5:20) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:712:1) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at Object.<anonymous> (http://localhost:8080/js/app.js:1880:18) [<root>] at __webpack_require__ (http://localhost:8080/js/polyfills.js:53:30) [<root>] at webpackJsonpCallback (http://localhost:8080/js/polyfills.js:24:23) [<root>] at http://localhost:8080/js/app.js:1:1 [<root>]
__zone_symbol__name
:
"Invariant Violation"