所以我使用的是我从 ngx-admin 下载的模板。
我正在创建一些简单组件的新库,例如带标签的输入等。这个库组件是无样式的,我想将 ngx-admin 样式注入(inject)这些组件。
将 syles 和 classes 传递给 child lib 组件的最佳方法是什么?
这是我正在使用我创建的新库的模板 page.component.html:
<div class="row">
<div class="col-xxl-5">
<div class="row">
<div class="col-md-12">
<nb-card>
<nb-card-header>Default Inputs</nb-card-header>
<nb-card-body>
<lib-input-with-lable></lib-input-with-lable> <- this is the lib I creared
</nb-card-body>
</nb-card>
</div>
</div>
</div>
库组件:
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'lib-input-with-lable',
template: `
<div class="d-flex flex-row">
{{title}}
<input style="margin-left: 2rem"/>
</div>
`,
styleUrls: ['./input-with-lable.component.scss'],
})
export class InputAndLableComponent implements OnInit {
constructor() { }
@Input() title: string;
ngOnInit(): void {
}
}
这是模板如何使用 css 样式的类:
<input type="password" nbInput fullWidth placeholder="Password">
所以我希望能够使用 nbInput 和全宽,我将其添加到 page.component.scss
我想使用的是某种
<lib-input-with-lable --passing here the styles--->
和里面
使用是这样的:
@Component({
selector: 'lib-input-with-lable',
template: `
<div class="d-flex flex-row">
{{title}}
<input ------using here the style------- style="margin-left: 2rem"/>
</div>
`,
styleUrls: ['./input-with-lable.component.scss'],
})
最佳答案
Demo在 input-with-lable.component.scss 中创建一个 css
.test{
//write your css wants
}
然后将输入发送到
<lib-input-with-lable style={{style}}></lib-input-with-lable>
在子组件中
@Input() style: string;
然后将此属性分配给您想要影响 css 的任何元素的类
关于css - 如何在 Angular 中将类样式从父级传递给子级,并在特定元素中使用它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62297338/