对组件隐藏Angular 6中的Bootstrap对话框_如何在angular的子组件中加载bootstrap？_使用bootstrap关闭angular.js中的所有对话框 - 腾讯云开发者社区

在Angular 6中，可以使用Bootstrap框架中的对话框组件来实现弹出窗口功能。隐藏Bootstrap对话框组件有两种常用的方法：

方法一：使用CSS样式隐藏对话框组件可以通过在对话框组件的HTML模板中添加自定义的CSS样式来隐藏对话框。在对话框组件的CSS文件中，可以添加以下样式代码：

:host {
  display: none; //隐藏对话框组件
}

在需要显示对话框组件的地方，通过在对话框组件的父组件中的代码中，使用*ngIf指令来控制显示或隐藏对话框组件：

<button (click)="showDialog()">打开对话框</button>
<app-dialog *ngIf="isDialogVisible"></app-dialog>

export class ParentComponent {
  isDialogVisible: boolean = false;
  
  showDialog() {
    this.isDialogVisible = true;
  }
}

方法二：使用Bootstrap的JavaScript方法隐藏对话框组件 Bootstrap的对话框组件提供了JavaScript方法来显示或隐藏对话框。可以在对话框组件的HTML模板中使用这些方法来隐藏对话框。例如，在对话框组件的关闭按钮上绑定click事件，调用Bootstrap的modal('hide')方法来隐藏对话框：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="hideDialog()">&times;</button>
        <h4 class="modal-title" id="myModalLabel">对话框标题</h4>
      </div>
      <div class="modal-body">
        对话框内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="hideDialog()">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

export class DialogComponent {
  hideDialog() {
    $('#myModal').modal('hide'); //隐藏对话框
  }
}

在需要显示对话框组件的地方，可以通过调用Bootstrap的modal('show')方法来显示对话框：

<button (click)="showDialog()">打开对话框</button>

export class ParentComponent {
  showDialog() {
    $('#myModal').modal('show'); //显示对话框
  }
}

以上是隐藏Angular 6中的Bootstrap对话框组件的方法。这些方法适用于需要在Angular 6项目中使用Bootstrap框架的开发者。同时，腾讯云也提供了一系列云计算产品，例如腾讯云云服务器、云数据库、云存储等，可以帮助开发者快速构建和部署云计算应用。详细信息可以参考腾讯云的官方网站：腾讯云。