[英]How do I insert an Angular Component in CSS grid
I'm learning Angular, and I'm working on a project ,in which, I need to use a CSS grid layout.我正在学习 Angular,我正在做一个项目,在这个项目中,我需要使用 CSS 网格布局。 However, I'm trying to find a way to insert a component inside a grid with given
grid-area
.但是,我正在尝试找到一种方法将组件插入到具有给定
grid-area
的网格中。
I tried to do this, <app-slots></app-slots>
, in app.component.html
but the component <app-slots>
was counted as one grid place only;我尝试在
app.component.html
中执行此操作, <app-slots></app-slots>
,但组件<app-slots>
仅计为一个网格位置; even though, it's 42 places.尽管如此,它是42个地方。
slots.component.html: slot.component.html:
<div class="abc" *ngFor="let in of getArrayOfNumbers(42) ;let i = index" [style.grid-row] = "i+1" style = "height:20px" > {{in}} </div>
slots.component.ts:插槽.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-slots',
templateUrl: './slots.component.html',
styleUrls: ['../../app.component.css']
})
export class SlotsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
getArrayOfNumbers(x: number){
var slots:number[] = [];
var a: number = x;
while(x != 0){
slots.push(x);
x--;
}
return slots;
}
}
Note: If something is not clear please tell me to add more info注意:如果有不清楚的地方,请告诉我添加更多信息
can you just insert the component between your tags (instead of {{in}}), then send whatever updating variables from the .ts file through that using angular's binding feature ?您可以在标签之间插入组件(而不是 {{in}}),然后使用 Angular 的绑定功能从 .ts 文件中发送任何更新变量吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.