[英]Load multiple components inside ngfor on click of button
I am creating a project with Angular-Material.我正在使用 Angular-Material 创建一个项目。 I want to integrate accordion panels in my project.我想在我的项目中集成手风琴面板。 I have facing a problem while loading dynamic component inside expansion panel.在扩展面板中加载动态组件时遇到问题。 I want to load dynamic different type of components inside expansion panel basis on conditions.我想根据条件在扩展面板内加载动态不同类型的组件。 Here is code:这是代码:
import {Component, NgModule, QueryList,ViewChildren, ComponentFactoryResolver, ViewContainerRef, TemplateRef, ViewEncapsulation}
from '@angular/core'
import { TcpModuleComponent } from './tcp-module/tcp-module.component'
import { UdpComponent } from './udp/udp.component'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ref:any;
viewContainerRef = [];
@ViewChildren('target', {read: ViewContainerRef}) container: QueryList<ViewContainerRef>
constructor(private resolver: ComponentFactoryResolver) {}
category = [{
"type":"TCP&UDP Port",
"code":"port",
"locked":false
},
{
"type":"DHCP",
"code":"dhcp",
"locked":true
},
{
"type":"ALG",
"code":"alg"
},
{
"type":"Tracert",
"code":"tracert"
},
{
"type":"Bandwidth",
"code":"bandwidth"
},
];
panelOpenState: boolean = false;
allExpandState = false;
ngOnInit() {
console.log(this.category)
}
loadComponent(type,item,comp){
if(item.locked == true){
type._toggle();
return
}
let componentRef;
let componentFactory;
if(item.code == "port"){
this.container.toArray().map((viewContainerRef, i) => {
componentFactory = this.resolver.resolveComponentFactory(TcpModuleComponent);
componentRef = viewContainerRef.createComponent(componentFactory);
this.ref = componentRef;
// this.viewContainerRef.push(viewContainerRef)
return
});
}
if(item.code == "dhcp"){
this.container.toArray().map((viewContainerRef, i) => {
componentFactory = this.resolver.resolveComponentFactory(UdpComponent);
componentRef = viewContainerRef.createComponent(componentFactory);
this.ref = componentRef
return
});
}
}
}
Html part html部分
<mat-accordion >
<mat-expansion-panel *ngFor="let data of category" (click)="loadComponent(panelH,data)">
<mat-expansion-panel-header #panelH >
<mat-panel-title>
<span class="title">{{data.type}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<div *ngIf="data.code == 'port'">
<ng-container #target></ng-container>
</div>
</mat-expansion-panel>
</mat-accordion >
I am not getting the proper ide ahow to acheive this.我没有得到正确的想法如何实现这一点。
Instead of adding ng-container you can directly add component tag to html.您可以直接将组件标签添加到 html,而不是添加 ng-container。
<mat-accordion >
<mat-expansion-panel *ngFor="let data of category" (click)="loadComponent(panelH,data)">
<mat-expansion-panel-header #panelH >
<mat-panel-title>
<span class="title">{{data.type}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<TcpModuleComponent *ngIf="data.code === 'port'"></TcpModuleComponent>
<UdpComponent*ngIf="data.code === 'dhcp'"></UdpComponent>
</mat-expansion-panel>
</mat-accordion >
Do you try to manage this with Angular directives?您是否尝试使用 Angular 指令来管理它? Angular Directives角度指令
And I think for your sample you dont need a click event like 'LoadComponent'.而且我认为对于您的示例,您不需要像“LoadComponent”这样的点击事件。 Take a look at following sample:请看以下示例:
import {Component, NgModule, QueryList,ViewChildren, ComponentFactoryResolver, ViewContainerRef, TemplateRef, ViewEncapsulation}
from '@angular/core'
import { TcpModuleComponent } from './tcp-module/tcp-module.component'
import { UdpComponent } from './udp/udp.component'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
ref:any;
viewContainerRef = [];
@ViewChildren('target', {read: ViewContainerRef}) container: QueryList<ViewContainerRef>
constructor(private resolver: ComponentFactoryResolver) {}
category = [
{ "type": "TCP&UDP Port", "code": "port", "locked": false },
{ "type": "DHCP", "code": "dhcp", "locked": true },
{ "type": "ALG", "code": "alg" },
{ "type": "Tracert", "code": "tracert" },
{ "type": "Bandwidth", "code": "bandwidth" },
];
panelOpenState: boolean = false;
allExpandState = false;
ngOnInit() {
console.log(this.category)
}
}
}
<div class="row">
<div class="col-md-12 mt-5 ml-5">
<mat-accordion>
<mat-expansion-panel *ngFor="let data of category">
<mat-expansion-panel-header>
<mat-panel-title>
<span class="title">{{data.type}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<span [ngSwitch]="data.code">
<div *ngSwitchCase="'port'">
TcpModuleComponent will insert here
</div>
<div *ngSwitchCase="'dhcp'">
UdpComponent will insert here
</div>
<div *ngSwitchDefault>
Default component will insert here
</div>
</span>
</mat-expansion-panel>
</mat-accordion>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.