0

我正在使用 ng2-bootstrap 在 Angular2 中的个人网站上开发一些元素。

我有一个固定的导航栏，我想在其中有一个按钮或文本链接，用于启动电子邮件联系表单的模式。我遇到的问题是，当我打开模式时，它是灰色的；我的理解是，这是因为它锚定在导航栏上。据我了解，解决这个问题的一种方法是使用 JQuery 将模态附加到 body 标记，但我读过直接操作 DOM 在 Angular2 中是不好的做法（而且我并不完全清楚无论如何，在 TypeScript 中执行此操作的正确方法是），所以我对如何进行有点茫然。

我是一名长期的编码员，但在 Web 开发领域没有做过任何非常先进的事情，所以如果这是一个微不足道的问题，我深表歉意。

我拥有的 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 的引用。非常感谢您的帮助。

4

0 回答 0