我有这个小的 gridComponent:
@Component({
selector: 'moving-grid',
templateUrl: './grid.component.html',
styleUrls: ['./grid.component.css']
})
export class GridComponent {
@Input('widgets') extComponents: Array<Component>;
}
还有第二个 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");
}
}
现在我正在尝试将多个 testComponent 实例传递给 gridComponent。因此我有第三个组件,看起来像这样:
selector: 'moving-grid-container',
template: `
<moving-grid [widgets]="[z1,z2]">
<test class="grid-item-content-001" #z1></test>
<test class="grid-item-content-002" #z2></test>
</moving-grid>
`
到目前为止,一切都按预期进行。但是如何在 gridComponent 中渲染来自 @Input 的组件呢? 我的第一种方法是在 testComponent 中声明一个 @ViewChild 并使用 getContent() 函数返回它。但这是行不通的。我可以以某种方式使用 ng-content 指令还是有更好的解决方案?
GridComponent 看起来像这样。我想在其中一个黑框内显示 @Input-Component 的模板。可能吗?
感谢您的帮助
最佳答案
您不应该使用 @Input
来传递组件。您可以使用 @ContentChildren
为此,还有一个抽象的 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
}
}
第三个组件 [moving-grid-container]
的模板将保持不变,但没有 [widgets]
和添加的 #widget
名称:
<moving-grid>
<test-widget class="grid-item-content-001" #widget [active]="false"></test>
<test-widget class="grid-item-content-002" #widget></test>
</moving-grid>
您的 TestWidgetComponent
将扩展一个抽象的 WidgetComponent :
@Component({
selector: 'test-widget',
// ...
})
export class TestWidgetComponent extends WidgetComponent {
public type: string = 'test';
}
还有你的WidgetComponent
:
@Directive()
export abstract class WidgetComponent {
@Input()
public active: boolean;
public type: string;
}
根据小部件的类型,您将拥有多个网格小部件:
@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 - 将组件传递给 Angular 中的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43933783/