javascript - 如何获取放置在 ng-template 中的组件实例?
问题描述
我对角度有疑问ng-template
。我在里面使用了 mycomponentng-temmplate
然后尝试获取我的组件的一个实例,但它返回undefined
我试过如下:
示例 - https://stackblitz.com/edit/grid-details-templates-ngtemplate-outlet-hrguvv?file=app.component.ts
html:
<div class="control-section">
<ejs-grid #grid [dataSource]='empData' (detailDataBound)="detailsDataBound($event)" id='Grid'>
<ng-template #detailTemplate let-data>
<ng-container *ngTemplateOutlet="check"></ng-container>
</ng-template>
<e-columns>
<e-column field="id" headerText="നമ്പർ" width="6%"></e-column>
<e-column field="slNo" headerText="നമ്പർ" width="6%"></e-column>
</e-columns>
</ejs-grid>
</div>
<ng-template #check>
<ejs-grid #childComponent allowPaging='true' (load)='load($event)' [pageSettings]='pageSettings'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right'></e-column>
<e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'>
</e-column>
<e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column>
<e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'>
</e-column>
<e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>
</e-columns>
</ejs-grid>
</ng-template>
App.component.ts:
export class AppComponent {
// Tried like below but no luck
@ViewChild('childComponent', {static: false})
private compInsideTemplate: GridComponent;
@ViewChild('grid', {static: true})
public grid: GridComponent;
public data: object[];
public datas: object[];
public args: any;
public getdata(args: any): object[] {
return this.data.filter((e: any)=> e.EmployeeID === args.EmployeeID);
}
ngOnInit(): void {
this.data = hierarchyOrderdata;
this.datas = data;
}
ngAfterViewInit() {
debugger;
console.log(this.compInsideTemplate);
}
}
但是我已经尝试过如下所示,但我无法完全采用 mycomponent 实例
示例 - https://stackblitz.com/edit/grid-details-templates-ngtemplate-outlet-w9aqmh?file=app.component.ts
app.component.ts:
export class AppComponent {
@ViewChild('check', {static: false})
private detailgrid: TemplateRef<any>;
@ViewChildren('check') detailgrid1: QueryList<any>;
@ViewChild('grid', {static: true})
public grid: GridComponent;
public data: object[];
public datas: object[];
public args: any;
public getdata(args: any): object[] {
return this.data.filter((e: any)=> e.EmployeeID === args.EmployeeID);
}
ngOnInit(): void {
this.data = hierarchyOrderdata;
this.datas = data;
}
ngAfterViewInit() {
debugger;
console.log(this.detailgrid);
console.log(this.detailgrid1);
}
}
需要帮助解决这种情况........!
解决方案
推荐阅读
- php - 同步基本站点登录和 Wordpress 登录以进行帐户管理
- c++ - const全局对象的构造函数主体执行?
- apache-kafka - 如何高效查询Kafka Topics?
- python - 无意义的空间名词
- php - 将页面视图添加到 API 的 WordPress 功能
- windows - Rsync > 不同步 Windows 快捷方式的内容
- c - 选择较小的错误不正确的 Printf() 语句:更少的参数与额外的参数
- javascript - 如何使用 javascript(加载时)回显节点值?
- clickhouse - 如何在 Clickhouse 中使用数组连接
- python - Blender - 尝试安装 Sverchok 插件 Scipy 包,但 PIP 已过时并且 ~WinError 5 Access denied