1

我正在使用 Angular 10 并且有一个包含名为session. 该选择字段允许我选择几个dndSession选项之一。每个选项的值是一个具有一对键值对的对象。

我希望能够在我的选择字段旁边有一个打开 modal-component 的按钮app-session-update-modal。我计划使用一个名为's选项的自定义字段包装器来添加它。我想将当前选择的-object 绑定到我的-component，以便我可以在那里编辑它。这是我遇到问题的地方。session-edit-wrapperwrappersessionFormlyFieldConfigdndSessionapp-session-update-modal

如何访问包装器中字段的值（在 ng-container 的打击 HTML 中fieldComponent）以将其绑定到我的模态组件上的属性？有我可以使用的事件吗？（到目前为止，我尝试了 ngModelChange，但没有成功）

我知道我需要将dndSession-objects 绑定为Subject<dndSession>(from rxjs)，因为我总是希望按钮能够编辑当前选定的dndSession. 但是我该如何建立这种联系呢？

下面是我的 Wrapper 的当前 HTML，我知道这是非常错误的，但我目前只是猜测正确的语法是什么样的。如前所述，目标是将Subject<dndSession>-object 绑定到session_subject我的模态组件的属性：

//session-update-wrapper.html
<div class="d-flex">
    <div class="flex-1">
        <ng-container #fieldComponent (ngModelChange)="sessionPkSubject.next(#fieldComponent.value)"></ng-container>
    </div>
    <div class="ml-2">
        <app-session-update-modal [session_pk_subject]="sessionPkSubject"></app-session-update-modal>
    </div>
</div>

//session-update-wrapper.ts
... //Skipped over imports and the @Component decorator
export class SessionUpdateWrapperComponent extends FieldWrapper implements OnInit, OnDestroy{
  sessionPkSubject : Subject<number>;

  ngOnInit(): void{
    this.sessionPkSubject = new Subject();
  }

  ngOnDestroy(): void{
    this.sessionPkSubject.complete();
  }
}
4

1 回答 1

0

感谢@a.aitboudad 对一个不相关问题的回复及其下面的评论，我设法拼凑起来，您可以访问组件包装器中的各种变量，包括formControl. 我相信这是由于它继承的类。无论哪种方式，您可以访问的变量都可以在这个 github 页面上看到。

通过访问formControl选择字段，我们可以通过订阅获取其 ObservableformControl.valueChanges以随时间获取选定的值。

//session-update-wrapper.ts
export class SessionUpdateWrapperComponent extends FieldWrapper {}

//session-update-wrapper.html
<div class="d-flex">
    <div class="flex-1">
        <ng-container #fieldComponent></ng-container>
    </div>
    <div class="ml-2">
        <app-session-update-modal [session_pk_observable]="formControl.valueChanges"></app-session-update-modal>
    </div>
</div>
于 2020-12-06T12:11:01.303 回答