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

代码嘻哈

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

很快我怎样才能有条件地改变{{person}}in的值register.componet.ts？

大卫

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

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

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。