使用选择器 Angular 2 覆盖样式

Question

>我用一些默认样式制作了一个按钮类，并在使用选择器标签的任何地方使用它，默认按钮有自己的 html 和 css 组件，这里是代码">

button.component.ts

import {Component, Input, Output, EventEmitter} from '@angular/core';
@Component({
  selector: 'app-button',
  template: `
<button class="button button1" (click)="click()">
        <span class="ladda-label"> {{title}} </span>
    </button>
`,
  styleUrls: ['./button.component.css'],
})
export class ButtonComponent {}

按钮组件.css

      button {
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      margin: 4px 2px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
      height: 6%;
      width: 6%;
    }
    .button1 {
      background-color: #4CAF50;
      color: black;
      border: 2px solid #4CAF50;
    }
    .button1:hover {
      background-color: #006400;
      color: white;
      border: 2px solid #006400;
    }
.button2 {
      background-color: #5CAF50;
      color: green;
      border: 2px solid #4CA550;
    }

这就是我使用按钮的方式：

<app-button></app-button>

通过使用它，我可以使用默认的 syle 来访问按钮，即 class="按钮按钮1">

但是如何应用不同的样式并告诉选择器不要加载默认样式，而是使用带有 button2 的样式，该样式也在按钮组件的相同 CSS 中声明，基本上覆盖新样式而不是默认样式，所以我有可重用性的优势。像这样的事情：

<app-button class="button button2"></app-button>//i want some thing like this to load the style with this class not th default one 

Answer 1

使用输入装饰器：

从"@angular/核心"导入{组件，输入，输出，事件发射器};

@Component({
  selector: 'app-button',
  template: `
<button [ngClass]="classList" (click)="click()">
        <span class="ladda-label"> {{title}} </span>
    </button>
`,
  styleUrls: ['./button.component.css'],
})
export class ButtonComponent {
   @Input("class-list") classList: string;
}

模板：

<app-button [class-list]="'button button2'"></app-button>

Answer 2

实际上你应该使用ngClass如下，

<button [ngClass]="['button','button1']" (click)="click()">
        <span class="ladda-label"> {{title}} </span>
</button>

现场演示