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

Posted 2023-03-13

【中文标题】如何使用 Angular 8 有条件地为一个组件制作两个 HTML 模板

【英文标题】：How can I make two HTML templates conditionally for one component with Angular 8

【发布时间】：2021-12-11 01:13:09

【问题描述】：

我有这个组件：

@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]
)

【参考方案1】：

角度组件不是这样工作的。

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

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

abstract class ComponentBase  
class ChildComponentOne extends ComponentBase  
class ChildComponentTwo extends ComponentBase  

【参考方案2】：

应用组件.html：

<first-component *ngIf="compoService.isfirst"></first-component>
<second-component *ngIf="!compoService.isfirst"></second-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;
  

对话框组件.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>

对话框组件.ts：

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

//... logic

constructor(public compoService: CompoService) 

  template1() 
    this.compoService.template1();
  

  template2() 
    this.compoService.template2();