将自定义样式添加到Angular中的零部件中

Question

我对angular 7还是个新手。我有一个带有title指令和div的表单。我试图将它们设置在同一行，表单的侧边宽度为49%。div样式可以很好地工作，但title组件不采用这种样式。问题是我只需要更改当前形式的title指令。有什么办法吗？非常感谢

<form #taskForm="ngForm" (ngSubmit)="onSubmit()">
<my-title   [style.width]='49%' [title]="'title.page'" [wikiUrl]='wikiUrl' icon="work">
</my-title>
<div [style.width]='49%'> 
<button>Save</button>
</div>
</form>

Answer 1

添加几乎等于49%的px。

<div [ngStyle]="{'width.px': 490px}"> 
<button>Save</button>
</div>

Answer 2

如果您想设置以百分比为单位的宽度，也可以使用以下语法：

<div [style.width.%]="49">...</div>

然而，真正的问题似乎是"我的标题"组件没有响应宽度规则。这可能是因为"我的标题"不是一个已知的html标签，因此在浏览器中没有默认的呈现行为

如果你想让你的组件标签表现得像一个块元素(div元素就是这样呈现的(，那么你只需要对它应用规则display: block;

由于您的组件标记不是模板的一部分，而是它的wapper，因此您可以将以下样式应用于使用"我的标题"组件的父组件：

/* this will not work inside the css file of the 'my-title' component:*/
my-title {
display: block;
}

或者您可以在"我的标题"组件的css/scss文件中使用:host选择器，在这种情况下可能更好：

:host {
display: block;
}