如何使不同MAT-TAB共享相同的HTML代码

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

@Component({
  selector: 'app-shared',
  template: `
    <div>
      <!-- 共享的HTML代码 -->
      <h1>{{ title }}</h1>
      <p>{{ content }}</p>
      <button (click)="onButtonClick()">点击</button>
    </div>
  `,
})
export class SharedComponent {
  @Input() title: string;
  @Input() content: string;
  @Output() buttonClick: EventEmitter<void> = new EventEmitter<void>();

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

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

@Component({
  selector: 'app-tab1',
  template: `
    <div>
      <app-shared [title]="tab1Title" [content]="tab1Content" (buttonClick)="onButtonClick()"></app-shared>
    </div>
  `,
})
export class Tab1Component {
  tab1Title = '标签1';
  tab1Content = '这是标签1的内容';

  onButtonClick() {
    // 处理按钮点击事件
  }
}

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

@Component({
  selector: 'app-tab2',
  template: `
    <div>
      <app-shared [title]="tab2Title" [content]="tab2Content" (buttonClick)="onButtonClick()"></app-shared>
    </div>
  `,
})
export class Tab2Component {
  tab2Title = '标签2';
  tab2Content = '这是标签2的内容';

  onButtonClick() {
    // 处理按钮点击事件
  }
}