如何在组件中引用 ng-template
How to reference ng-template in component
如何在我的 component.ts 文件中引用 <ng-template #modal_Template>
。以前,我通过我的 html 文件上的按钮调用模式并使用这个 <button type="button" class="btn btn-primary" (click)="openModal(modal_Template)">Create template modal</button>
但现在我需要在触发事件后在我的组件文件中调用它。知道怎么做吗?我试过 @ViewChild('modal_Template', {static: false}) modalTemp: ElementRef;
但这似乎不起作用。
html:
<button type="button" class="btn btn-primary" (click)="openModal(modal_Template)">Create template modal</button>
<ng-template #modal_Template>
//modal code
</ng-template>
组件文件
import { Component, TemplateRef, OnInit, ViewChild, ElementRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
@ViewChild('modal_Template', {static: false}) modalTemp: ElementRef;
constructor(private modalService: BsModalService) { }
//modal
modalRef: BsModalRef;
ngAfterViewInit() {
console.log(this.modalTemp.nativeElement);
}
//modal func
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
}
//series of events
someFunctionEvent(){
//need to call modal function with the referenced #modal_Template variable as an argument
this.openModal(this.modalTemp.nativeElement.value);
}
}
@ViewChild(TemplateRef, {static: false}) template: TemplateRef<Object>;
<ng-template>Content</ng-template>
可以在此处的文档中找到更多信息 - https://angular.io/api/core/ViewChild#description
您不需要nativeElement.value
。
如果模板中只有一个ng-template
,可以使用@Sam提供的方式代替模板引用变量
@ViewChild('modal_Template', {static: false}) modalTemp: TemplateRef<void>;
someFunctionEvent(){
this.openModal(this.modalTemp);
}
如何在我的 component.ts 文件中引用 <ng-template #modal_Template>
。以前,我通过我的 html 文件上的按钮调用模式并使用这个 <button type="button" class="btn btn-primary" (click)="openModal(modal_Template)">Create template modal</button>
但现在我需要在触发事件后在我的组件文件中调用它。知道怎么做吗?我试过 @ViewChild('modal_Template', {static: false}) modalTemp: ElementRef;
但这似乎不起作用。
html:
<button type="button" class="btn btn-primary" (click)="openModal(modal_Template)">Create template modal</button>
<ng-template #modal_Template>
//modal code
</ng-template>
组件文件
import { Component, TemplateRef, OnInit, ViewChild, ElementRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
@ViewChild('modal_Template', {static: false}) modalTemp: ElementRef;
constructor(private modalService: BsModalService) { }
//modal
modalRef: BsModalRef;
ngAfterViewInit() {
console.log(this.modalTemp.nativeElement);
}
//modal func
openModal(template: TemplateRef<any>) {
this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
}
//series of events
someFunctionEvent(){
//need to call modal function with the referenced #modal_Template variable as an argument
this.openModal(this.modalTemp.nativeElement.value);
}
}
@ViewChild(TemplateRef, {static: false}) template: TemplateRef<Object>;
<ng-template>Content</ng-template>
可以在此处的文档中找到更多信息 - https://angular.io/api/core/ViewChild#description
您不需要nativeElement.value
。
如果模板中只有一个ng-template
,可以使用@Sam提供的方式代替模板引用变量
@ViewChild('modal_Template', {static: false}) modalTemp: TemplateRef<void>;
someFunctionEvent(){
this.openModal(this.modalTemp);
}