Делаем радио-кнопку и используем ее в любом компоненте

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>