如何为动态创建的组件添加样式 - angular 5
瓦西夫
要求
我需要将动态创建的组件放在具有行和列的容器中。行数和列数取决于用户输入。最初创建的每个组件都占用 1x1，即 1 行 1 列，然后可以根据用户要求调整大小。新创建的组件，先填充行，如果行被填充，则可以将其放置在最左列的下一行。所以故事一直持续到它填满容器，如图所示：
问题
问题是我无法按预期以正确的对齐方式插入这些组件。怎么了？如果我添加第一个组件并将大小调整为 2x2，然后添加 1x1 的另一个组件，然后添加 1x1 的第 3 个组件。假设第三个组件插入在 1x1 的第二个组件下方，但它被插入到 2x2 的第一个组件下方：
我希望你现在更清楚我想要做什么。
如果我将新创建的组件包装在新列中，则可以解决此问题。简而言之，一列对应一个组件。但不知道如何使用每个新创建的组件创建列。
瓦西夫
获取组件的引用ComponentRef，然后获取 HTMLElement <HTMLElement>componentRef.location.nativeElement。现在您已准备好更改样式...**
constructor(private CFR: ComponentFactoryResolver) {
}
private addComponent() {
let componentFactory = this.CFR.resolveComponentFactory(MyComponent);
// getting the component's reference
let componentRef: ComponentRef<MyComponent> = this.location.container.createComponent(componentFactory);
// getting the component's HTML
let element: HTMLElement = <HTMLElement>componentRef.location.nativeElement;
// adding styles
element.classList.add('col-8 float-left');
element.style.height = "100px";
element.style.width= "50px";
}
添加所有这些后，在浏览器开发人员工具中运行该应用程序时，您会看到类似这样的内容
<my-component class="col-8 float-left"></my-component>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在 Angular 4/5 中动态添加 NG Prime 计划（日历）组件
- 2
Angular 5 动态添加和删除组件实例
- 3
如何添加Angular Material组件的特定样式
- 4
如何通过向resolveComponentFactory添加动态名称来动态创建Angular组件
- 5
如何为Angular“@ckeditor/ckeditor5-angular”添加插件到CKEditor？
- 6
ng 深度样式使 Angular 5 中的不同组件分开
- 7
动态表单生成 Angular 5
- 8
如何向动态创建的组件添加样式
- 9
如何在angular5中从appcomponent动态调用子组件的函数？
- 10
如何为使用 .netcore 和 angular5 开发的 Web 应用程序添加 docker 支持？
- 11
在Angular2 RC.5中动态加载组件
- 12
在Angular2 RC.5中动态加载组件
- 13
将动画应用于动态加载的组件 Angular 5
- 14
在组件 Ionic 3 / Angular 5 中动态更改 Sass 变量
- 15
如何在Angular的子组件内部动态创建组件？
- 16
Angular 动态添加 css 样式
- 17
如何导入 $sce - Angular 5
- 18
如何使用组件将 bootstrap 4 添加到 angular 5
- 19
向 Angular 5 Material Form 动态添加一行
- 20
在 html Angular5 中添加动态文本时出错
- 21
如何为 Angular 的 Kendo 网格创建动态单元格
- 22
如何为React组件添加多个动态样式？
- 23
Angular 5：如何从表中动态添加和删除行中获取值
- 24
如何为rc5配置angular-cli项目？
- 25
Angular 5 - 如何为网站正确设置帖子
- 26
我如何将两个表单转换为组件并添加组件以在 angular 5 中查看
- 27
动态组件的 Angular/CSS 样式部分
- 28
如何解析Angular 2中动态添加的组件的值？
- 29
带有嵌套组件的 Angular 5 路由
我来说两句