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

Question

I have the following component:我有以下组件：

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

In the html, will looks like this:在 html 中，将如下所示：

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

I want t defined a width and weight to the <form-button> instead of in the <div class="form-button-wrapper"> .我想为<form-button>而不是在<div class="form-button-wrapper">定义宽度和重量。

How can I do that?我怎样才能做到这一点？

Answer 1

Yes, just use the :host selector.是的，只需使用:host选择器。 It gives you access to the wrapping angular element.它使您可以访问环绕的角度元素。

//form-button.component.scss

:host {
 // insert your styles here
}

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

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2020-02-03 12:31:50

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2020-02-03 12:31:50

解决方案1
3 已采纳 2020-02-03 12:31:50