如何从模态中的字段获取值？

Question

我有一个表单，当我输入 une 值时 test，我想在模态中检索该值。

1))

2))

这是我的错误信息

error TS2339: Property 'dest' does not exist on type 'TotoResultModalComponent'.

你能帮我在模式中显示值吗？

PARENT

toto.component.ts

export class TotoComponent implements OnInit, OnDestroy {

  private unsubscribe$ = new Subject<void>();

  private svm: string | null = null;
  dest: string = '';


  constructor(
    private service: TotoService,
    private router: Router, 
    private activatedRoute: ActivatedRoute, 
    private modalService: BsModalService,
    private location: Location,

    ) { }

  
    ngOnInit(): void {
      this.svm = this.activatedRoute.snapshot.paramMap.get('svm');
      if (!this.svm) {
       
        return;
      }
   
    }

    ngOnDestroy(): void {
      this.unsubscribe$.next();
      this.unsubscribe$.complete();
    }


    openConfirmModal(): void {
      const modalRef = this.modalService.show(TotoResultModalComponent, {
        ...NOT_CLOSABLE_MODAL_OPTIONS,
        class: 'modal-dialog-centered modal-lg',
        ariaLabelledBy: 'modal-error-title',
        initialState: {

        },
  
        providers: [
        
          { provide: TotoService}
        
        ]
      });
  
    }

}

toto.component.html

<form #formulaire="ngForm" (ngSubmit)="formulaire.form.valid">
  <div class="row row-cols-3 pt-3">
    <div class="col text-end">
      <label for="dest" class="form-label">Name</label>
    </div>
    <div class="col-4">
      <input
        id="dest"
        name="dest"
        type="text"
        class="form-control"
        style="min-width: 380px"
        maxlength="25"
        [(ngModel)]="dest"
      />
    </div>
  </div>

  <div class="row row-cols-3 pt-3">
    <div class="col"></div>
    <div class="col text-start">
      <button
        type="submit"
        class="btn btn-primary"
        (click)="openConfirmModal()"
        style="background-color: #239CD3;"
        [disabled]="formulaire.form.invalid"
      >
        Confirm
      </button>
    </div>
  </div>
</form>

CHILD

toto-result-modal.component.html

<table class="table table-hover table-striped spaceLeft" style="width: 700px">
  <tbody>
    <tr>
      <th style="width: 60%">Name</th>
      <td style="min-width: 100%">{{ dest}}</td>
    </tr>
  </tbody>
</table>

toto-result-modal.component.ts

export class TotoResultModalComponent implements OnInit {


  private unsubscribe$ = new Subject<void>();
  modalService: any;


  @Output() closeModal = new EventEmitter<void>();


  constructor(
    public modal: BsModalRef,
    private router: Router,
    private location: Location,
    private service: TotoService
  ) { }

  ngOnInit(): void {
    this.goBack();
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }


  goBack(): void {
    this.modal.hide();
    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
        this.router.navigate(['/transfers/toto']);   
    }); 
 
  }

 
  }

Answer 1

创建一个带有 dest 的 Observable 的服务。在父组件中向它提供数据并在子组件中订阅它。你已经提供了 TotoService，你可以把它放在那里。

dest$: EventEmitter<string> = new Eventemitter<string>();

dest$.emit(dest);

dest$.subscribe(_ => { ... });

Answer 2

您有类型错误，因为 TotoResultModalComponent 没有 dest 属性，但您在 html 中调用了它。只需添加属性.

为了在模式中显示外部数据，您必须获取 BsModalRef 并设置 dest 属性.

openConfirmModal(): void {
      const modalRef = this.modalService.show(TotoResultModalComponent, {
        ...NOT_CLOSABLE_MODAL_OPTIONS,
        class: 'modal-dialog-centered modal-lg',
        ariaLabelledBy: 'modal-error-title',
        initialState: {

        },
        providers: [
          { provide: TotoService}
        ]
      });
      modalRef.content.dest = this.dest; // add this
    }

你也可以直接在initialState中传递：

initialState: {dest: this.dest}

模式文档中的第 2 部分有一个示例。

https://valor-software.com/ngx-bootstrap/#/components/modals#service-component

我最近没有使用 valor 软件的经验，但在这种情况下它与其他 bootstrap 组件库相似。

如何从模态中的字段获取值？

How to get a value from a field in a modal?

angular