Angular:将组件传递给组件 [英] Angular: Pass Component to a Component
问题描述
我有这个小 gridComponent:
@Component({选择器:'移动网格',templateUrl: './grid.component.html',styleUrls: ['./grid.component.css']})导出类 GridComponent {@Input('widgets') extComponents: Array;}
还有第二个 testComponent
@Component({选择器:'测试',模板:`<div #content>我打招呼<li>i</li><li>u</li><button (click)="test()">点击我</button>世界
`})导出类 TestComponent {@ViewChild('content') 内容:HTMLElement;获取内容(){返回 this.content;}测试() {控制台日志(测试");}}
现在我正在尝试将 testComponent 的多个实例传递给 gridComponent.因此,我有第三个组件,看起来像这样:
模板:`<移动网格 [widgets]="[z1,z2]"><test class="grid-item-content-001" #z1></test><test class="grid-item-content-002" #z2></test></移动网格>`
到目前为止,一切都按预期进行.但是如何从 gridComponent 中的 @Input 渲染组件?我的第一种方法是在 testComponent 中声明一个 @ViewChild 并使用 getContent() 函数返回它.但它不会工作.我可以以某种方式使用 ng-content 指令还是有更好的解决方案?
GridComponent 看起来像这样.我想在其中一个黑框内显示 @Input-Component 的模板.可能吗?
感谢您的任何帮助
你不应该使用 @Input
来传递组件.您可以使用 @ContentChildren
和一个抽象的 WidgetComponent
:
@Component({选择器:'移动网格',模板:`<div class="widget-wrapper"><ng-container *ngFor="let widget of widgets"><!-- 在这里为不同类型使用 ngSwitchCase--><grid-test-widget [widget]="widget";*ngIf="widget.active &&widget.type === 'test'></grid-widget></ng-容器>
`,styleUrls: ['./grid.component.css']})导出类 GridComponent 实现 AfterContentInit {@ContentChildren('小部件')小部件:QueryList 第三个组件的模板将保持不变,但没有 你的 还有你的 您将拥有多个基于小部件类型的网格小部件:[widgets]
和添加的 #widget
名称:TestWidgetComponent
将扩展一个抽象的 WidgetComponent :@Component({选择器:'测试小部件',//...})导出类 TestWidgetComponent 扩展 WidgetComponent {公共类型:字符串 = '测试';}
WidgetComponent
:@Directive()导出抽象类 WidgetComponent {@输入()公共活动:布尔值;公共类型:字符串;}
@Component({选择器:'网格测试小部件',模板:`<div #content>我说你好<li>i</li><li>u</li><button(click)=test()">点击我</button>;世界
`})导出类 GridTestWidgetComponent{}
I have this small gridComponent:
@Component({
selector: 'moving-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css']
})
export class GridComponent {
@Input('widgets') extComponents: Array<Component>;
}
And a second testComponent
@Component({
selector: 'test',
template: `
<div #content>I say hello<li>i</li><li>u</li><button (click)="test()">click me</button> world</div>
`
})
export class TestComponent {
@ViewChild('content') content: HTMLElement;
getContent() {
return this.content;
}
test() {
console.log("test");
}
}
Now I'm trying to pass multiple instances of testComponent to the gridComponent. Therefore I have a third Component which looks like this one:
template: `
<moving-grid [widgets]="[z1,z2]">
<test class="grid-item-content-001" #z1></test>
<test class="grid-item-content-002" #z2></test>
</moving-grid>
`
Until this point, everything works like expected. But how can I render the Components from @Input in the gridComponent? My first approach was to declare a @ViewChild in the testComponent and return it with a getContent()-function. But it won't work. Can I use the ng-content directive in some way or is there a better solution?
The GridComponent looks like this. I want to display the templates of a @Input-Component inside one of the black boxes. Is it possible?
Thanks for any kind of help
You should not use an @Input
to pass in the components. You can use @ContentChildren
for that and an abstract WidgetComponent
:
@Component({
selector: 'moving-grid',
template: `
<div class="widget-wrapper">
<ng-container *ngFor="let widget of widgets">
<!-- use a ngSwitchCase here for different types-->
<grid-test-widget [widget]="widget" *ngIf="widget.active && widget.type === 'test'"></grid-widget>
</ng-container>
</div>
`,
styleUrls: ['./grid.component.css']
})
export class GridComponent implements AfterContentInit {
@ContentChildren('widget')
widgets: QueryList<WidgetComponent>;
ngAfterContentInit() {
//your components will be available here
}
}
The template of your third component will stay the same, but without the [widgets]
and an added #widget
name:
<moving-grid>
<test-widget class="grid-item-content-001" #widget [active]="false"></test>
<test-widget class="grid-item-content-002" #widget></test>
</moving-grid>
Your TestWidgetComponent
which will extend an abstract WidgetComponent :
@Component({
selector: 'test-widget',
// ...
})
export class TestWidgetComponent extends WidgetComponent {
public type: string = 'test';
}
And your WidgetComponent
:
@Directive()
export abstract class WidgetComponent {
@Input()
public active: boolean;
public type: string;
}
And you'll have several grid widgets based on the type of the widget:
@Component({
selector: 'grid-test-widget',
template: `<div #content>I say hello<li>i</li><li>u</li><button (click)="test()">click me</button> world</div>`
})
export class GridTestWidgetComponent{}
这篇关于Angular:将组件传递给组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!