angular – 如何将ngStyle应用于：组件中的host元素？

发布时间：2020-12-17 07:31:40 所属栏目：安全来源：网络整理

导读：我有这样的事情： import { Component,OnInit,Input } from '@angular/core';@Component({ selector: 'column',template: 'ng-content/ng-content'})export class ColumnComponent { @Input() columnWidth: string = '0'; constructor() {}} 我想将属性colum

我有这样的事情：

import { Component,OnInit,Input } from '@angular/core';

@Component({
    selector: 'column',template: '<ng-content></ng-content>'
})
export class ColumnComponent {

    @Input() columnWidth: string = '0';        

    constructor() {}
}

我想将属性columnWidth应用于[ngStyle]

<ng-content></ng-content>

父元素,做这样的事情：

<div [ngStyle]="{'width': columnWidth+'px'}" > ....

我知道如何将样式应用于主机元素：

:host {  /*styles*/  }

但我不知道将参数传递给它.

没有办法做到这一点.

你能做的是

@HostBinding('style.width')
width:string = '10px';

要么

@HostBinding('style.width.px')
width:number = '10';

主要限制是宽度部分是固定的,不能从变量中使用.

另一种充分灵活的方法是

constructor(private elRef:ElementRef,private renderer:Renderer) {}

setStyles() {
  this.renderer.setElementStyle(this.elRef.nativeElement,'width','10px');
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!