代码之家 › 专栏 › 技术社区 › yavg

如何从提供者调用@viewchild?

angular

yavg · 技术社区 · 4 年前

我用的是角度9,这是我的舞台。我正在使用一个叫做 mdbootstrap modals 以下列方式 template component :

<button type="button" mdbBtn color="default" rounded="true" data-toggle="modal" data-
(click)="frame.show()" mdbWavesEffect>Launch Modal</button>
<!-- click on the button, opens my modal-->!

<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog">
....
</div>

我可以按一下按钮打开模式 (click)="frame.show()"

@ViewChild("frame") frame: any
 .
 .
 .
this.frame.show();

所以我创建了一个名为 mymodalComponent 使用此选择器: <mymodal> 与前面的内容:

<mymodal #modal></mymodal>

<mymodal #modal></mymodal> :

<div mdbModal #frame="mdbModal" class="modal fade top" id="frameModalTop" tabindex="-1" role="dialog">
....
</div>

我有一个提供者:

@Injectable()
 export class ServicesProvider implements AfterViewInit {
  @ViewChild("modal") modal: any;
  constructor(){
  }
  openModal(){
    this.modal.frame.show();
  }
}

我的想法是当我执行 openModal() 功能,我会把 <mymodal #modal> </mymodal> 在模板中 app.component.html ,但这一行的功能显示为 undefined .

this.modal.frame.show();  //this.modal is undefined

我该怎么修?

servicesProvider.openModal() 在组件中调用时,我的模态将打开

总而言之

我已经把 <mymodal#modal></mymodal> 在里面 应用程序组件.html (我不知道这是不是最好的方法)然后 app.module.ts 我已经在报关单上进口了。

当我从提供者调用函数时,我只想: 服务提供商.openModal() ,生成了模态,但我不知道如何调用 frame.show() 从供应商那里, this.modal 在里面 servicesProvider 是 未定义

0 回复 | 直到 4 年前

V.Tur 4 年前

尝试实施:

app.component.html
<button type="button" mdbBtn color="primary" class="relative waves-light" (click)="showModal()" mdbWavesEffect>Launch demo modal</button>

app.component.ts
import { Component } from '@angular/core';
import { ModalComponent } from './modal/modal.component';
import { MDBModalRef, MDBModalService } from 'angular-bootstrap-md';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'mdb-angular-free';
  modalRef: MDBModalRef;

  constructor(
    private modalService: MDBModalService
  ) {}

  showModal() {
    this.modalRef = this.modalService.show(ModalComponent, {})
    this.modalRef.content.action
        .subscribe((result: any) => {
          if (result === 'yes') {
              console.log('YES');
          }
    });
  }
}

modal.component.html
<div class="modal-content text-center">
  <div class="custom-modal modal-dialog modal-notify m-0"> 
    <div class="modal-header justify-content-center">
      <p class="heading">TITLE</p>
    </div>
    <div class="modal-body">
      <mdb-icon fas icon="close" size="4x" class="animated rotateIn"></mdb-icon>
      <p>MODAL</p>
    </div>
    <div class="modal-footer justify-content-center">
      <button type="button" mdbBtn color="danger" class="waves-effect" aria-label="ÐÐ°ÐºÑÑÑÑ" (click)="onNoClick()" mdbWavesEffect>ÐÐµÑ</button>
      <button type="button" mdbBtn color="danger" class="relative waves-effect" outline="true" (click)="onYesClick()" mdbWavesEffect>ÐÐ°</button>
    </div>
  </div>  
</div>

modal.component.ts
import { Component, OnInit } from '@angular/core';
import { MDBModalRef } from 'angular-bootstrap-md';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {

  action: Subject<any> = new Subject();

  constructor(public modalRef: MDBModalRef) {}

  ngOnInit() {
  }

  onYesClick() {
    this.action.next('yes');
  }

  onNoClick() {
      this.modalRef.hide();
      this.action.next('no');
  }
}