如何为根组件 dom 元素添加样式（角度选择器组件）答案

【问题标题】：How to add styling to the root component dom element (angular selector component)如何为根组件 dom 元素添加样式（角度选择器组件）
【发布时间】：2020-05-19 04:53:27
【问题描述】：

我有以下组件：

// Typescript
@Component({
    selector: 'form-button',
    templateUrl: './form-button.component.html',
    styleUrls: ['./form-button.component.scss']
})
export class FormButtonComponent {}

//form-button.component.html
<div class="form-button-wrapper">
    <div class="content"></div>
</div>

//form-button.component.scss
.form-button-wrapper {
    width: 100%;
    height: 100%
}

在 html 中，将如下所示：

<head>...</head>
<body>
    ....
    <form-button>
         <div class="form-button-wrapper">
             <div class="content"></div>
         </div>
    </form-button>
    ....
</body>

我想为 <form-button> 而不是在 <div class="form-button-wrapper"> 中定义宽度和重量。

我该怎么做？

【问题讨论】：

使用:host 选择器。 blog.angular-university.io/angular-host-context
@VladimirBogomolov 好！你能把它写成正确的答案吗？
阅读这篇旧文章你会得到答案:) Styling Angular 2 component tag

标签： javascript css angular typescript sass

【解决方案1】：

是的，只需使用:host 选择器。它使您可以访问包装角元素。

//form-button.component.scss

:host {
 // insert your styles here
}

.form-button-wrapper {
    width: 100%;
    height: 100%
}

【讨论】：