如何为动态创建的组件添加样式 - angular 5

Question

要求

我需要将动态创建的组件放在具有行和列的容器中。行数和列数取决于用户输入。首先创建的每个组件都需要1x1，表示1行1列，然后可以根据用户需求调整大小。新创建的组件，首先填充行，如果行已填充，则可以将其放置在最左侧列的下一行中。所以故事一直持续到它填满容器，如图所示：

问题

问题在于我无法按照预期的那样将这些组件插入到正确的对齐中。怎么了？如果我添加第一个组件并调整大小为2x2，则添加1x1的另一个组件，然后添加1x1的第3个组件。假设第3个组件插入1x1的第2个组件下面，但是它被插入到2x2的第一个组件下面：

我希望你现在更清楚我想做什么。

如果我将新创建的组件包装在新列中，则可以解决此问题。在坚果壳中，一个组分用于一个组分。但不知道如何使用每个新创建的组件创建列。

Answer 1

获取组件参考，即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>