angular2-template - 从组件角度 2 获取 ng-template

标签 angular2-template angular2-directives ng-bootstrap

我怎样才能得到角度2的元素?
如果我在 html 中有这个

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">Header</div>
   <div class="modal-body">Body</div>
  <div class="modal-footer">footer</div>
</ng-template>

我将它用于 ngBmodal ng-bootstrap
如果我使用按钮打开内容它的工作=按钮
(click)="open(content,data.id)"

然后我想从组件中打开内容
在这种情况下,我从其他页面重定向并打开内容
ngOnInit() {
    this.activatedRoute.queryParams.subscribe((params: Params) => {
        let id = params['id'];
        if(id != undefined){
          this.open('content',id);         
        }
      });
  }
open(content, id) {
    this.dataModal = {};
    this.getDataModal(id);

    this.mr = this.modalService.open(content, { size: 'lg' });
  }

模态打开但不使用 html,我尝试 afterviewinit 获取#content 它不起作用
谢谢,对不起我的英语:v

最佳答案

首先导入 NgbModal 和 ModalDismissReasons
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
并将 modalservice 添加到构造函数
private modalService: NgbModal
看:

https://ng-bootstrap.github.io/#/components/modal/examples#options

然后在您的 typescript 文件中:

1 - 导入 TemplateRef 和 ViewChild,例如:

import { TemplateRef, ViewChild } from '@angular/core';

2 - 创建绑定(bind) ngtemplate 的变量(在构造函数之前添加):
@ViewChild('content')
private content: TemplateRef<any>;

3 - 从 typescript 打开模式:
this.modalService.open(this.content);

关于angular2-template - 从组件角度 2 获取 ng-template,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43994990/

相关文章:

angular - Angular 2 中的表单控件

Angular2 - Keyup 需要澄清

javascript - angular 2 - ngFor 动态函数

angular - 在自定义验证器指令中注入(inject) ngControl,导致循环依赖

Angular 2 组件与对象的双向数据绑定(bind)

Angular 2 : How to test that an NgBootstrap component (and contents) are on the page?

angular - 在 *ngFor 中错开 Angular2 动画

angular - 当鼠标进入或悬停时显示 ngx bootstrap 工具提示,当单击鼠标从那里移除时显示 ngx bootstrap 工具提示

Angular Testing - ngBootstraps typeahead

angular - 如何将 ng-bootstrap 添加到 Angular-CLI(Broccoli 版本)项目中?