Question

我创建了一个带有默认样式的按钮类，并且在任何使用选择器标签的地方使用它默认按钮有自己的组件，html和css这里是代码＆＃34;

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 {}

button.component.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来访问该按钮，该按钮是类=＆＃34;按钮按钮1＆＃34;

但是如何应用不同的样式并告诉选择器不加载默认样式但使用样式与 button2 同样在css的同一css中声明strong> button 组件，基本上覆盖新样式而不是默认样式，因此我具有可重用性的优势。这样的事情：

<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

使用输入装饰器：

导入{Component，Input，Output，EventEmitter}来自＆＃39; @ angular / core＆＃39;;

@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>

LIVE DEMO

使用选择器角度2覆盖样式

2 个答案: