如何在一个页面上多次重用自定义Angular2组件？

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

@Component({
  selector: 'app-custom-component',
  template: `
    <div>
      <h2>{{ title }}</h2>
      <button (click)="onButtonClick()">Click me</button>
    </div>
  `,
})
export class CustomComponent {
  @Input() title: string;
  @Output() buttonClick: EventEmitter<void> = new EventEmitter<void>();

  onButtonClick() {
    this.buttonClick.emit();
  }
}

import { Component } from '@angular/core';
import { CustomComponent } from './custom.component';

@Component({
  selector: 'app-page',
  template: `
    <div>
      <app-custom-component [title]="'Component 1'" (buttonClick)="onButtonClick()"></app-custom-component>
      <app-custom-component [title]="'Component 2'" (buttonClick)="onButtonClick()"></app-custom-component>
    </div>
  `,
})
export class PageComponent {
  onButtonClick() {
    console.log('Button clicked');
  }
}