如何将值发送到模态并在模态的组件中读取它？ Angular 8

Question

我想打开 quickViewModal 并发送一个 id 并在模态组件中读取它。

谁能帮我？ 下一个代码是 html 我称之为模态

 <div class="icon swipe-to-top" data-toggle="modal" data-target="#quickViewModal"> <i class="fas fa-eye"></i> </div>

而下一个是模态的html。 模态在不同的 html 文件中，并且有自己的.ts

 <div class="modal fade" id="quickViewModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body">

Answer 1

如果有父子关系。

在父.html中，

<div>
    <div class="icon swipe-to-top" data-toggle="modal" data-target="#quickViewModal" (click)="onModalOpen(divRef)"
        id="divId" #divRef>
        <i class="fas fa-eye"></i>
    </div>
    <!-- Modal -->
    <modal-comp [id]="valueInParent"></modal-comp>
</div>

在 parent.ts 中，

onModalOpen(divIdRef){
    this.valueInParent=divIdRef.id;
  }

在 modal-comp.ts 中，

export class ModalComponent  {
  @Input() id: string;
}

在 modal-comp.html 中，

 <div class="modal fade" id="quickViewModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p>{{id}}</p>
                </div>
            </div>
        </div>
  </div>

您还可以找到正在工作的 stackblitz

此外，如果上述组件之间没有父子关系，则通过Injectable Service进行。

我希望这是你想要做的。