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％。

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

Answer 2

如果要以百分比设置宽度，还可以使用以下语法：

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

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

如果您希望组件标签的行为类似于块元素（即div元素的呈现方式），则只需对其应用规则display: block;。

由于您的组件标签不是模板的一部分，而是包装器，因此您可以将以下样式应用于使用“ my-title”组件的父组件：

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

...或者您可以在“ my-title”组件的css / scss文件中使用:host选择器，在这种情况下可能会更好：

:host {
    display: block;
}

在Angular中向组件添加自定义样式

2 个答案: