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

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 添加到您的组件。例如，如果您希望您的按钮在某些时候是红色的，您可以在 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>

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

Making a Radio button and use it in any component

angular

angular8