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

Question

要求

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

问题

问题是我无法按预期以正确的对齐方式插入这些组件。发生什么了？如果我添加第一个组件并将大小调整为 2x2，然后添加 1x1 的另一个组件，然后添加 1x1 的第 3 个组件。假设第三个组件插入在 1x1 的第二个组件下方，但它被插入到 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>