如何使用 Angular 8 为一个组件有条件地制作两个 HTML 模板

Question

我有这个组件：

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
  providers: [YoutubeService]
})

出于某些原因，我需要有条件地创建另一个 templateURL form1.component.html。

此组件包含一个带有两个按钮的对话框（button1 和 button2）如果我点击 button1 我想要 form.component 加载 form.component.html 如果我点击 button2 我要 form.component 加载 form1.component.html

如何有条件地为一个组件使用 2 HTML 个文件？

有这样的解决方案吗？

@Component({
  selector: 'app-form',
  templateUrl: if (condition) => './form.component.html' else './form1.component.html',
  styleUrls: ['./form.component.css'],
  providers: [YoutubeService]
})

Answer 1

这不是 angular 组件的工作方式。

您需要在组件的 HTML 中使用 *ngIf 条件，或者需要有条件地将子组件插入组件的模板中。

如果你想在这些子组件之间共享逻辑，它们可以扩展一个基础class:

abstract class ComponentBase { }
class ChildComponentOne extends ComponentBase { }
class ChildComponentTwo extends ComponentBase { }

Answer 2

应用-component.html :

<first-component *ngIf="compoService.isfirst"></first-component>
<second-component *ngIf="!compoService.isfirst"></second-component>

应用-component.ts :

import { CompoService } from '../compo.service';
//... other imports

//... logic

constructor(public compoService: CompoService) {}

//... logic

compo.service.ts :

export class CompoService {

  ServiceSubject = new Subject<any[]>();

  isfirst: boolean = true;

  constructor() { }

  template1() {
    this.isfirst = false;
  }

  template2() {
    this.isfirst = true;
  }

对话-component.html :

<input type="radio" name="radio3" id="template1">     
 <label for="template1" (click)="template1()">load templae 1</label>

<input type="radio" name="radio3" id="template2">           
 <label for="template2" (click)="template2()">load templae 2</label>

对话框-component.ts :

import { CompoService } from '../compo.service';
//... other imports

//... logic

constructor(public compoService: CompoService) {}

  template1() {
    this.compoService.template1();
  }

  template2() {
    this.compoService.template2();
  }

如何使用 Angular 8 为一个组件有条件地制作两个 HTML 模板

How can I make two HTML templates conditionally for one component with Angular 8

angular

typescript

components

angular8

angular-ng-if