Как изменить реквизит компонента React в компоненте Angular? - PullRequest
Новая
       17

Как изменить реквизит компонента React в компоненте Angular?

0 голосов
/ 13 марта 2019

У меня есть проблема - я создал компонент React, который делает модальное изменение базы данных из списка.И в проекте, над которым я работаю, есть старый компонент Angular, который представляет собой кнопку для вызова этого модального React.

В моем модальном реагировании у меня есть несколько полей: 

export interface ConnectedDatabaseModalState {
list,
isLoading,
selected,
isDatabaseLoading,
visible
}

После загрузки страницы видимым устанавливается значение true, когда я выбираю базу данных, есть способ скрыть модальный режим: 

    hide() {
    this.setState({
        visible: false,
        isDatabaseLoading: false
    })
}

Таким образом, модальный режим не уничтожается, а просто скрывается.В моем угловом компоненте я хочу снова изменить значение visible на true, но я не знаю, как это сделать: 

export class SelectDatabaseButtonComponent extends BasicComponent implements OnInit {
@Input() openDbModalFn: any;

selectDatabase$ = new Subject();
database: Database;


constructor(private store: Store<AppState>, private cdr: ChangeDetectorRef) {
    super();
}

ngOnInit() {
    this.selectDatabase$.pipe(takeUntil(this.componentDestroyed$)).subscribe(response => {
        //TODO open modal here
    });

    this.subscriptions.add(
        this.store
            .pipe(
                select(selectSelectedDatabase),
                tap((database) => {
                    this.database = database;
                    this.cdr.detectChanges();
                })
            ).subscribe()
    )
}
}

И шаблон: 

<button type="button" id="modalButton" class="btn btn-primary btn-sm" (click)="selectDatabase$.next()">
{{ (database?.description) || "Undefined"}}

Кто-нибудь может мне помочь?А также скажите мне, хорошо ли менять реквизит компонента реакции в угловом компоненте?

Что я хочу сделать, это вызвать метод из компонента реакции: 

show() {
    this.setState({
        visible: true
    })
}

В установленном угловом компоненте, который// TODO

...