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

Question

我是 Angular 的新手，我找不到针对以下情况的解决方案：我有以下导航，其中 register as a family 和 register as a sitter 链接到同一组件模板，例如 register。

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

还是我用错了方法？

这是navbar.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>

这是register.component.html：

 <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>

如何有条件地更改 register.componet.ts 中 {{person}} 的值？

Answer 1

修改路由以包含指示注册类型的参数

//routing.ts
//Add this route
{path: '/register/:registrationType', component: RegistrationComponent }

在您的组件中注入路由并根据注册类型初始化人员变量

import {ActivatedRoute, Params} from '@angular/router';

constructor(private route: ActivatedRoute){}

person: string;
  ngOnInit()
  {
    this.route.params.forEach((params: Params) => {
      let registrationType = params['registrationType'];
      this.person = registrationType == 'person' : 'Person' : 'Family'
    });

修改您的路由器链接

 <button *ngIf="!authService.isLoggedIn" mat-menu-item routerLink="register/person" routerLinkActive="active">
    <span>Register as a sitter</span>
  </button>


  <button *ngIf="!authService.isLoggedIn" mat-menu-item routerLink="register/family" routerLinkActive="active">
    <!--(click)="showSignupForm()"-->
    <span>Register as a family</span>
  </button>

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

How to interpolate two different strings into the same template conditionally?

string-interpolation

angular