如何从 angular 中 class 的编码部分到达模板内的模式 2

Question

我有一个名为成功模式的组件。我想使用代码部分到达此组件内的 div 。有什么想法可以实现吗？

successModal.component.html

<div bsModal #successModalAccessor="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-success" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" (click)="successModalAccessor.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="successModalAccessor.hide()">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

successModal.component.ts

import { Component } from '@angular/core';
import { ModalModule } from 'ng2-bootstrap/modal';

    @Component({
      selector:'SuccessModal',
      templateUrl: 'successModal.component.html'
    })

    export class SuccessModalComponent {


        showSuccess(){
          //i would like to do something like successModalAccessor.show();
        }
     }

Answer 1

使用 ViewChild

<div class="modal-header" #theDivThatYouWant>
        <h4 class="modal-title">Modal title</h4>
        <button type="button" class="close" (click)="successModalAccessor.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>


inside the component

@ViewChild('theDivThatYouWant') theDivThatYouWant:ElementRef

theDivThatYouWant 在这种情况下属于 ElementRef 类型，如果您想要实际的 html 元素，您必须说：

  myFunctionThatNeedsThatDiv(){
     let divElement =  this.theDivThatYouWant.nativeElement;

  }

Answer 2

我找到了解决方案我像下面这样使用 viewChild

@ViewChild('successModalAccessor') successModalElement:ModalDirective

并且在函数中

 showSuccess(){
          this.successModalElement.show();
 }

如何从 angular 中 class 的编码部分到达模板内的模式 2

How to reach a modal inside a template from the coding part of the class in angular 2

angular2-directives

angular