使用

<div>
  <sp-circle color="red" size="mini"></sp-circle>
  <sp-circle color="green" size="mini"></sp-circle>
  <sp-circle color="gray" size="mini"></sp-circle>
  <sp-circle color="empty" size="mini"></sp-circle>
</div>

<div>
  <sp-circle color="red"></sp-circle>
  <sp-circle color="green"></sp-circle>
  <sp-circle color="gray"></sp-circle>
  <sp-circle color="empty"></sp-circle>
</div>

组件样式

:host {
  display: inline-block;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  background-color: transparent;
  border: 3px solid transparent;
  border-radius: 50%;
}

:host[color=red] {
  background-color: #ff4a44;
  border-color: #ff8285;
}

:host[color=green] {
  background-color: #14a23a;
  border-color: #51bb79;
}

:host[color=gray] {
  background-color: #4a4b4e;
  border-color: #878789;
}

:host[color=empty] {
  border-color: #646567;
}

:host[size=mini] {
  width: 8px;
  height: 8px;
  border-width: 2px;
}

// 如果是类，可以这样写
:host(.active) {
    border-color: red;
}

效果

参考

Angular 2 HostListener & HostBinding