Question

我正在Angular2中的个人网站上使用ng2-bootstrap来处理某些元素。

我有一个固定的导航栏，我希望在其中有一个按钮或文本链接，用于启动电子邮件联系表单的模式。我遇到的问题是，当我打开模态时，它会变灰;我的理解是因为它固定在导航栏上。根据我的理解，解决这个问题的一种方法是使用JQuery将模态附加到body标签，但我已经读过，直接操作DOM是Angular2中的不良做法（并且我并不完全清楚无论如何，在TypeScript中这样做的正确方法是，所以我对如何继续进行处理有点不知所措。

我是一名很长时间的编码员，但在网络开发领域没有做过任何非常先进的事情，所以如果这是一个微不足道的问题我会道歉。

TypeScript我看起来像这样：

import {Component} from '@angular/core';
import {CORE_DIRECTIVES} from '@angular/common';
import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from 'ng2-bootstrap/ng2-bootstrap';


@Component({
    selector: 'contact-modal',
    directives: [MODAL_DIRECTVES, CORE_DIRECTIVES],
    viewProviders:[BS_VIEW_PROVIDERS],
    template: `    

<button class="btn btn-primary button-text" (click)="lgModal.show()">Large modal</button>


<div bsModal #lgModal="bs-modal" class="modal fade modal-backdrop" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">this is going to be an email contact form</h4>
        <p> email form goes here</p>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>    
    `
})

export class ContactModalComponent{
//something goes here?    
}

我将它包含在导航栏中，只需在我想要链接的导航栏中放置对contact-modal的引用即可。非常感谢您的帮助。

从Angular2中的导航栏打开模态的正确方法？

0 个答案: