Angular 将ElementRef替换为TemplateRef by条件

如果

load

的计算结果为

true

，我想用模板

loadingbuttonemplate

替换传递为

ElementRef

的按钮。我怎样才能做到这一点？如果

加载

返回到

false

，则应将其替换为反之亦然

app-form.component.ts：

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html'
})
export class FormComponent {

  @Input()
  submitButton: ElementRef;

  @Input()
  loading: boolean;

  @ViewChild('loadingButtonTemplate')
  private loadingButtonTemplate: TemplateRef<any>;

  constructor() {
  }

}

@组件({
选择器：“应用程序窗体”，
templateUrl:“./form.component.html”
})
导出类FormComponent{
@输入（）
submitButton:ElementRef；
@输入（）
加载：布尔；
@ViewChild（'loadingButtonTemplate'）
私有加载按钮模板：TemplateRef；
构造函数（）{
}
}

app-form.component.html：

<form [formGroup]="formGroup" (ngSubmit)="submit()" autocomplete="off" novalidate>
  <ng-content></ng-content>
</form>

<ng-template #loadingButtonTemplate>
  <button loadingButton></button> <!-- third party directive -->
</ng-template>

预期用途：

<app-form [submitButton]="submitButton" [loading]="loading">

  ... some form inputs ...

  <button type="button">Delete</button>
  <button #submitButton type="submit">Add</button>

</app-form>

... 一些表单输入。。。
删除
添加

---

另一种更好的方法是将指令和所需的类“注入”到按钮中，而不是替换它吗？

您可以使用*ngIf和其他方法来实现这一点

<app-form [submitButton]="submitButton" [loading]="loading">

  ... some form inputs ...

  <button type="button">Delete</button>
  <button #submitButton *ngIf="!loading;else loadingButtonTemplate" type="submit">Add</button>

</app-form>

<ng-template #loadingButtonTemplate>
  <button loadingButton></button> <!-- third party directive -->
</ng-template>

... 一些表单输入。。。
删除
添加