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

在Angular2中，可以通过以下步骤在一个页面上多次重用自定义组件：

创建自定义组件：首先，创建一个自定义组件。在Angular2中，可以使用@Component装饰器来定义组件，并使用@Input和@Output装饰器来定义组件的输入和输出属性。
导入自定义组件：在需要使用自定义组件的页面或模块中，导入自定义组件。可以使用import语句将组件引入到页面的组件类中。
在模板中使用组件：在页面的模板中，使用组件的选择器来调用自定义组件。可以在模板中使用组件的选择器作为HTML标签来使用组件。
传递数据给组件：如果需要向组件传递数据，可以使用组件的输入属性。在使用组件的地方，可以通过属性绑定的方式将数据传递给组件。
监听组件事件：如果组件需要与外部进行交互，可以使用组件的输出属性和事件。在使用组件的地方，可以通过事件绑定的方式监听组件触发的事件。

以下是一个示例：

创建自定义组件：

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');
  }
}

在上面的示例中，我们创建了一个名为CustomComponent的自定义组件，并在PageComponent中导入和使用了该组件。在PageComponent的模板中，我们使用了两次<app-custom-component>标签来重用自定义组件，并通过属性绑定和事件绑定来传递数据和监听事件。

这样，我们就可以在一个页面上多次重用自定义Angular2组件了。

腾讯云相关产品和产品介绍链接地址：