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

Question

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

Ric*_*cha 7 javascript css sass typescript angular

我有以下组件：

// 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%
}

Run Code Online (Sandbox Code Playgroud)

在 html 中，将如下所示：

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

Run Code Online (Sandbox Code Playgroud)

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

我怎样才能做到这一点？

Answer 1

小智 10

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

//form-button.component.scss

:host {
 // insert your styles here
}

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，9 月前
查看次数：	2540 次
最近记录：	5 年，9 月前