时间戳

首页 > 解决方案 > 如何为根组件 dom 元素添加样式（角度选择器组件）

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

问题描述

我有以下组件：

// 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">.

我怎样才能做到这一点？

标签： javascriptcssangulartypescriptsass

解决方案

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

//form-button.component.scss

:host {
 // insert your styles here
}

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

推荐阅读