Question

我遇到了一些问题-我创建了React组件，该组件为更改列表中的数据库提供了模式。在我正在工作的项目中，有一个旧的Angular组件，该组件是调用此React模式的按钮。

在我的反应模式中，我有几个字段：

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

页面加载后，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"}}

有人可以帮助我吗？还告诉我改变角度分量中的反应分量props是否有益？

我想做的是从react组件调用方法：

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

在Angular组件中// TODO

如何在Angular组件中更改React组件props？

0 个答案: