css - 如何在 Angular 中将类样式从父级传递给子级，并在特定元素中使用它

Question

所以我使用的是我从 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'],
    })

Answer 1

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 的任何元素的类