Angular 组件选择器阻止了其内容样式答案

【问题标题】：Angular component's selector is blocking its content stylingAngular 组件选择器阻止了其内容样式
【发布时间】：2020-05-27 09:06:37
【问题描述】：

所以，我正在围绕 Bootstrap 的输入组构建一个包装器组件，如下所示：

@Component({
    selector: 'bootstrap-input',
    template: `
        <div class="{{ calculateColumns(cols) + ' input-group mb-3' }}">
            <div *ngIf="hasLabel" class="input-group-prepend">
                <span class="input-group-text">{{ label }}</span>
            </div>
            <ng-content></ng-content>
        </div>
    `,
})
export class BootstrapInput {
    @Input() cols: number[];
    @Input() label: string;
    @Input() hasLabel: boolean = true;

    /**
     * Given an array of columns in the following order:
     * [small, medium, large, x-large], this method will translate it
     * to the correct class.
     *
     * @example [12, 12, 4, 4] -> "col-12 col-sm-12 col-md-12 col-lg-4 col-xl-4"
     */
    calculateColumns(cols: number[]): string {
        let classString = `col-${cols[0]} col-sm-${cols[0]} col-md-${cols[1]} col-lg-${cols[2]} col-xl-${cols[3]}`;
        return classString;
    }
}

会这样使用：

<div class="form-row">
  <bootstrap-input [cols]="[12, 12, 3, 3]" label="Name">
    <input class="form-control" />
  </bootstrap-input>

  <bootstrap-input [cols]="[12, 12, 3, 3]" label="Email">
    <input class="form-control" />
  </bootstrap-input>

  <bootstrap-input [cols]="[12, 12, 3, 3]" label="Phone">
    <input class="form-control" />
  </bootstrap-input>
</div>

接下来，把你的浏览器放大，这样就不行了。

现在，由于某些原因，HTML，或者更具体地说，组的样式无法正常工作。如果我打开调试控制台并删除包装 bootstrap-input 标记，它可以正常工作。值得一提的是，这个错误只发生在 > 中屏显示器（大屏和超大屏）上。

Screen Shot

Demo on StackBlitz

我在这里做错了什么？

【问题讨论】：

标签： html css angular twitter-bootstrap

【解决方案1】：

您在 .form-row 元素上应用 display: flex，但在包装器内的元素上应用 col-* 类（使用 flex: css 规则）。 flex: 规则应应用于display: flex 的子代。

您应该直接在包装元素上应用列类，而不是它的子元素，使用@HostBinding 可能是更简单的解决方案。

【讨论】：