Question

我想使用单选按钮并将其用于具有不同样式的其他组件中，而无需重写html和css。并且我希望他们在切换每个

时更改其样式

首先，我使用html和一些CSS将单选按钮作为一个单独组件中的组件

<div class="list-item" (click)="check()">
  <span class="list-item-text">
    {{data.value}}
  </span>
  <div class="inputs">
    <span class="box">
      <span class="inner-box" [class.fill]="fill"></span>
    </span>
  </div>
</div>

并使用ts制作了切换功能

export class ProductAllFilterComponent implements OnInit {
public Categories =[];

  constructor(
    private categoryService:CategoryService,
    private _router:Router) { 
      this.categoryService.getCategories().subscribe((response:any)=>{
        this.Categories = response.data;
      });
  }
active = 1;
  ngOnInit() {
  }

  goToLink(link) {
    this._router.navigate([link])
  }
  // route back to home

  activeSection(index) {
    this.active = index;
  }
}

如何使它成为可重用的组件，并为其添加不同的样式，而又不改变所有其他组件的样式。

Answer 1

一个解决方案可能是将@Input（）和ngStyle添加到您的组件中。例如，如果il希望在TS中可以使用的某个时刻将按钮变为红色，则为：

@Input() color: string;
defaultColor: //your default color

以及在HTML中：

<span class="box" [ngStyle]="{'background: color ? color : defaultColor'}"> ...

然后，您必须使用它的选择器在另一个组件中调用您的组件，例如：

<app-custom-checkbox color="#ff0000"></app-custom-checkbox>

制作一个单选按钮并在任何组件中使用它

1 个答案: