Angular - 如何绑定不同用途的按钮？

Question

我是 Angular 和 TypeScript 的新手。

我必须做一个可以有文本或图标或文本+图标的按钮。

例子：

button-icon-text-component.html

<button>
  TEST BUTTON
</button>

app.component.html

<app-button-icon-text {here I have to choose beetwen TEXT or ICON}></app-button-icon-text>

button-icon-text-component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-button-icon-text',
  templateUrl: './button-icon-text.component.html',
  styleUrls: ['./button-icon-text.component.css']
})
export class ButtonIconTextComponent implements OnInit {

{ADD SOME LOGIC}

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

这些是我的 3 个例子：

对于我安装的图标：npm i material-icons

然后我在 style.css 中导入材质：@import '~material-icons/iconfont/material-icons.css';

app.component.html

//text button
<app-button-icon-text [text]="'test'"></app-button-icon-text>
  <br><br>

//iconbutton
  <app-button-icon-text [icon]="'face'"></app-button-icon-text>
  <br><br>

//icon + text button
  <app-button-icon-text [text]="'test'" [icon]="'face'"></app-button-icon-text>

button-icon-text.component.html

<button>
  <span *ngIf="icon"  class="material-icons">{{icon}}</span>
  {{text}}
</button>

button-icon-text.component.html

import {Component, Input, OnInit} from '@angular/core';

@Component({
  selector: 'app-button-icon-text',
  templateUrl: './button-icon-text.component.html',
  styleUrls: ['./button-icon-text.component.css']
})
export class ButtonIconTextComponent implements OnInit {

  @Input()
  text;

  @Input()
  icon;

  constructor() {
  }

  ngOnInit() {
  }

}

Answer 2

使用@Input装饰器并在其上设置'TEXT'或'ICON'。

stackblitz：https://stackblitz.com/edit/angular-qmnp2u

app.component.html：

<app-button-icon-text type="TEXT"></app-button-icon-text>

button-icon-text-component.ts:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-button-icon-text',
  templateUrl: './button-icon-text.component.html',
  styleUrls: ['./button-icon-text.component.css']
})
export class ButtonIconTextComponent implements OnInit {

  @Input()
  type // TEXT or ICON

  constructor() { }

  ngOnInit() {
  }

}

button-icon-text-component.html:

<button *ngIf="type === 'TEXT'">
  TEST BUTTON
</button>
...