使用容器

Question

我看到它的方式，它可以用作<div>容器的替代品，用于样式化组件。例如：

使用容器

@Component({
    template: `
        <div class="container">
            <h1>Some Title</h1>
            <p>Some Content</h1>
        </div>
    `,
    styles: [`
        .container {
            border: 1px solid black;
            display: flex;
        }
    `],
})

使用:host

@Component({
    template: `
      <h1>Some Title</h1>
      <p>Some Content</h1>
    `,
    styles: [`
        :host {
            border: 1px solid black;
            display: flex;
        }
    `],
})

如果我理解正确，这两个解决了完全相同的问题。并且很少有一个元素和类可以在几乎所有单个组件中担心。

问题：这是:host的用途吗？如果没有，那么它的重点是什么，除了在任何地方添加容器之外，为组件赋予样式的最佳实践是什么？

Answer 1

他们没有解决同样的问题。 :host用于为主机设置样式，.container用于样式化组件中具有container类的任何div。

由于封装，.container div不可用于组件外部的样式，而主机元素可以设置样式。

请注意，display属性的初始值为inline，因此默认情况下，您的组件将显示为inline元素。也许你不想那样，尤其是if you have a block element inside of it，这似乎是违反直觉的（即使它是允许的）。

Answer 2

:host为当前组件设置了包装元素（例如<app-header>元素），而且据我所知，这是一种简单而舒适的方式来设置这样的元素。

Answer 3

我还将在当前答案中添加以下观察结果：

class .container

如果您使用班级.container，则必须始终保持同步，以防您想要重命名组件。在大型应用程序中，这往往会在开发的早期阶段发生。
此外，如果你没有良好的CSS卫生习惯，这会让你知道名字冲突。
可以通过覆盖元素类属性在运行时错误地删除它。使用element.classList.add(); .remove()

<强>：主机

免去你需要大量打字（有时候组件名称会变长）
无论您在元素中添加哪些类，都存在。我相信它也必须优先于.container类。
（仅Angular）Angular会模拟相同的行为，但是如果禁用组件封装，则所有:host选择器都会变得无用，这会导致使用.container类。

使用：主机选择器vs容器div

使用容器

使用:host

3 个答案: