要求

我需要将动态创建的组件放入具有行和列的容器中。行数和列数取决于用户输入。首先创建的每个组件采用 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>

https://stackoverflow.com/questions/48947007/