将 ng-template 插入子组件不渲染传入的模板

Question

我有一个名为 auth 的父组件。在这个组件中，我有一个 ng-template，它是一个代表登录/注册表单的表单，如下所示：

`<ng-template #authForm>
    <form [formGroup]="authForm" (ngSubmit)="onSubmit()">
      <mat-form-field>
        <input matInput placeholder="Username" formControlName="userName" >
        <mat-error *ngIf="postForm.get('userName').invalid">You must enter a value</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="E-mail" formControlName="email" >
        <mat-error *ngIf="postForm.get('email').invalid">You must enter a value</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Password" formControlName="password" type="password">
        <mat-error *ngIf="postForm.get('password').invalid">You must enter a value</mat-error>
      </mat-form-field>
    </form>
  </ng-template>`

在同一个父组件中，我使用角材质mat-tab-group组件来显示登录组件或注册组件：

`<mat-tab-group (selectedTabChange)="onSignup($event)">
    <mat-tab label="Login">
        <ng-container *ngIf="!isSignup">
            <app-login [loginForm]="authForm"></app-login>  
          </ng-container>
    </mat-tab>
    <mat-tab label="Sign Up"> 
        <ng-container *ngIf="isSignup">
            <app-signup></app-signup>
          </ng-container>
    </mat-tab>
</mat-tab-group>`

在子组件上，例如 LoginComponent。我有一个@Input() loginForm: TemplateRef<any>。每当我尝试渲染传入的模板时，什么都不会显示，我不知道为什么这不起作用：

`<ng-container 
  *ngTemplateOutlet="loginForm">
</ng-container>`

Answer 1

问题是你有两个authForm 变量名。将 ng-template 名称更改为其他名称，如下所示。工作样本Stackblitz

<ng-template #authFormTemplate>
    <form [formGroup]="authForm" (ngSubmit)="onSubmit()">
      <mat-form-field>
        <input matInput placeholder="Username" formControlName="userName" >
        <mat-error *ngIf="postForm.get('userName').invalid">You must enter a value</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="E-mail" formControlName="email" >
        <mat-error *ngIf="postForm.get('email').invalid">You must enter a value</mat-error>
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Password" formControlName="password" type="password">
        <mat-error *ngIf="postForm.get('password').invalid">You must enter a value</mat-error>
      </mat-form-field>
    </form>
  </ng-template>

<mat-tab-group (selectedTabChange)="onSignup($event)">
    <mat-tab label="Login">
        <ng-container *ngIf="!isSignup">
            <app-login [loginForm]="authFormTemplate"></app-login>  
          </ng-container>
    </mat-tab>
    <mat-tab label="Sign Up"> 
        <ng-container *ngIf="isSignup">

          </ng-container>
    </mat-tab>
</mat-tab-group>