https://github.com/meepobrother/ng-react-component
ng-react-component
https://github.com/meepobrother/ng-react-component
angular component limit react
Last synced: 7 months ago
JSON representation
ng-react-component
- Host: GitHub
- URL: https://github.com/meepobrother/ng-react-component
- Owner: meepobrother
- Created: 2018-01-22T01:17:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-14T13:49:29.000Z (over 7 years ago)
- Last Synced: 2025-02-26T20:39:05.239Z (7 months ago)
- Topics: angular, component, limit, react
- Language: TypeScript
- Homepage:
- Size: 405 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# ReactComponent
```ts
import { EventEmitter, ElementRef, Renderer2 } from '@angular/core';
import { OnChanges, KeyValueChanges, DoCheck, KeyValueDiffers, SimpleChanges } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/share';
export interface KeyValue {
[key: string]: any;
}
export declare abstract class ReactComponent
implements OnChanges, DoCheck {
private _differs;
ele: ElementRef;
render: Renderer2;
state: T;
readonly state$: Observable;
props: P;
readonly props$: Observable
;
stateChange: EventEmitter;
propsChange: EventEmitter
;
onClick: EventEmitter;
/**
* 监听click事件
* @param e
*/
_onClick(e: Event): void;
private _stateDiffer;
private _propsDiffer;
constructor(_differs: KeyValueDiffers, ele: ElementRef, render: Renderer2);
setState(state: T): void;
setProps(props: P): void;
ngOnChanges(changes: SimpleChanges): void;
ngDoCheck(): void;
setClass(classObj: {
[key: string]: boolean;
}): void;
setStyle(styleObj: {
[key: string]: string;
}): void;
removeStyle(styles: any): void;
addStyle(name: string, value: string): void;
addClass(name: string): void;
setAttribute(classObj: {
[key: string]: any;
}): void;
removeClass(name: string): void;
private _stateChanges(changes);
private _propsChanges(changes);
abstract onPropsChange(changes: KeyValueChanges): void;
abstract onStateChange(changes: KeyValueChanges): void;
}
```
- 使用
### some.html
```html
{{props.title}}
```
- or
```html
{{(props$|async).title}}
```
### some.ts
```ts
import { ReactComponent } from 'ng-react-component';
import { KeyValueChanges, KeyValueDiffers } from '@angular/core';
export interface SomeProps{
title: string;
}
export interface SomeState{
loading: boolean;
}
@Component({
selector: 'some-com',
templateUrl: './some.html'
})
export class SomeComponennt extends ReactComponent implements OnInit{
constructor(
differs: KeyValueDiffers
){
super(differs);
}
ngOnInit() { }
changeTitle() {
this.setProps({
title: '测试使用'
});
}
hideLoading() {
this.setState({
loading: false
});
}
onPropsChange(changes: KeyValueChanges){
}
onStateChange(changes: KeyValueChanges){
}
getDefaultProps(): SomeProps{
return {
title: ''
}
}
getInitialState(): SomeState{
return {
loading: false
}
}
}
```
### app.component.html
```html
```
### app.component.ts
```ts
export class AppComponent {
props: SomeProps = {
title: 'some title'
}
state: SomeState = {
loading: true
}
_propsChange(props: SomeProps){
console.log(props);
}
_stateChange(state: SomeState){
console.log(state);
}
}
```