Angular 5可复用按钮组件创建及插值表达式报错咨询

嘿，我来帮你搞定Angular 5里可复用按钮组件的问题，顺便解决那个恼人的报错～

首先，你遇到的Got interpolation ({{}}) where expression was expected报错，大概率是在按钮组件的模板里错误地用了插值语法绑定事件，比如写成了(click)="{{someFunction}}"——这是不对的，Angular的事件绑定(click)需要直接写表达式，不能用{{}}包裹，这就是报错的根源。

接下来给你两种靠谱的可复用按钮组件实现方案，都能保证样式统一，同时支持不同实例调用不同函数：

方案一：通过@Input传递回调函数（适合简单场景） #

这种方式是把父组件的函数直接传给子组件，子组件触发点击时调用这个函数。

1. 创建可复用按钮组件的TS文件 #

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

@Component({
  selector: 'app-reusable-button',
  template: `
    <!-- 这里用统一的样式类，保证所有按钮格式一致 -->
    <button class="app-btn app-btn-primary" (click)="triggerCallback()">
      {{ buttonLabel }}
    </button>
  `,
  styles: [`
    .app-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .app-btn-primary {
      background-color: #1976d2;
      color: white;
    }
  `]
})
export class ReusableButtonComponent {
  // 接收按钮显示的文本
  @Input() buttonLabel: string;
  // 接收父组件传递的回调函数
  @Input() onClick: () => void;

  triggerCallback() {
    // 确保回调函数存在再调用，避免报错
    if (this.onClick) {
      this.onClick();
    }
  }
}

2. 父组件中使用该按钮 #

<!-- 调用保存函数的按钮 -->
<app-reusable-button 
  buttonLabel="保存数据"
  [onClick]="handleSave"
></app-reusable-button>

<!-- 调用取消函数的按钮 -->
<app-reusable-button 
  buttonLabel="取消操作"
  [onClick]="handleCancel"
></app-reusable-button>

父组件的TS里定义对应的处理函数：

handleSave() {
  // 这里写你的保存逻辑
  console.log('执行保存操作');
}

handleCancel() {
  // 这里写你的取消逻辑
  console.log('执行取消操作');
}

方案二：通过@Output触发事件（更符合Angular组件通信规范） #

这种方式是子组件触发一个自定义事件，父组件监听这个事件并执行对应的函数，耦合度更低，扩展性更好。

1. 可复用按钮组件的TS文件 #

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

@Component({
  selector: 'app-reusable-button',
  template: `
    <button class="app-btn app-btn-primary" (click)="buttonClick.emit()">
      {{ buttonLabel }}
    </button>
  `,
  styles: [`
    .app-btn {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .app-btn-primary {
      background-color: #1976d2;
      color: white;
    }
  `]
})
export class ReusableButtonComponent {
  @Input() buttonLabel: string;
  // 定义一个输出事件，父组件可以监听它
  @Output() buttonClick = new EventEmitter<void>();
}

2. 父组件中使用该按钮 #

<!-- 绑定保存函数到按钮点击事件 -->
<app-reusable-button 
  buttonLabel="保存数据"
  (buttonClick)="handleSave()"
></app-reusable-button>

<!-- 绑定删除函数到按钮点击事件 -->
<app-reusable-button 
  buttonLabel="删除条目"
  (buttonClick)="handleDelete()"
></app-reusable-button>

父组件TS里的函数和方案一类似：

handleSave() {
  console.log('执行保存');
}

handleDelete() {
  console.log('执行删除');
}

最后再强调下报错的坑 #

记住：Angular的事件绑定(click)、属性绑定[property]里都不需要用{{}}，只有在纯文本输出的时候才用插值语法。比如你之前如果写了(click)="{{handleSave}}"，就会触发那个报错，改成(click)="handleSave()"或者像方案一那样绑定回调函数就没问题了。

内容的提问来源于stack exchange，提问作者Michael Mason