如何有条件地将两个不同的字符串插入到同一个模板中？

Question

我是Angular的新手，我无法找到以下方案的解决方案：我有以下导航，其中register as a family和register as a sitter链接到同一个组件模板，例如{ {1}}。

我的问题是如何通过插值动态自定义register，以便当我在register template时显示标题register as a family，反之亦然。

或者我使用了错误的方法？

这是navbar.component.html：

register as a family

这是register.component.html：

<mat-toolbar>
  <div class="navigation">
    <button mat-button [matMenuTriggerFor]="menuSitter">For sitters
    </button>
    <mat-menu class="example-menu" #menuSitter="matMenu">
      <button mat-menu-item routerLink="find-family" routerLinkActive="active">
        <span>Find a familiy</span>
      </button>
      <button *ngIf="!authService.isLoggedIn" mat-menu-item routerLink="register" routerLinkActive="active">
        <span>Register as a sitter</span>
      </button>
    </mat-menu>
    <button mat-button [matMenuTriggerFor]="menuFamily">For host families
    </button>
    <mat-menu class="example-menu" #menuFamily="matMenu">
      <button mat-menu-item routerLink="find-sitter" routerLinkActive="active">
        <span>Find a sitter</span>
      </button>
      <button *ngIf="!authService.isLoggedIn" mat-menu-item routerLink="register" routerLinkActive="active">
        <!--(click)="showSignupForm()"-->
        <span>Register as a family</span>
      </button>
    </mat-menu>
</mat-toolbar>

我怎样才能有条件地更改 <h2 class="mat-title" style="text-align:center;">Register as a {{person}}</h2> <form class="example-form" [formGroup]="registerForm" (submit)="onSubmit(registerForm)" novalidate> /* code */ </form> 中{{person}}的值？