angular - 在组件函数中选择 angular 模板，而不是在 @Component 中添加

Question

我在 angular 8 中工作，我有一个组件，我有大约 6 个或更多模板。用户将从界面或某些逻辑中选择要使用的那个，比如说，

if(a==2) use template 'ddd.html'
else user template 'sss.html'

我不想在这里使用它

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

我希望它在任何函数中都是构造函数或任何其他函数。
如果它使用任何子组件或指令类型的逻辑来解决就可以了，我唯一的需要是在该逻辑上选择模板。
我通常会将相同的数据传递给所有模板，只会更改它们的设计。

Answer 1

我遇到了同样的问题，我正在寻找您要求的相同解决方案，但我没有找到任何解决方案。
我用继承解决了这个问题。
您必须创建一个没有任何模板的组件，该组件将成为父类。该组件将包含您需要的所有逻辑。我只插入一个 Input 来展示它是如何工作的:

base.component.ts

@Component({
  selector: 'base',
  template: ''
})
export class BaseComponent{
  @Input()
  text: string;
}

然后你必须创建不同的模板作为扩展 BaseComponent 的不同组件:

template1.component.ts

@Component({
  selector: 'template1',
  template: '<button>{{text}}</button>'
})
export class Template1Component extends BaseComponent{} 

template2.component.ts

@Component({
  selector: 'template2',
  template: '<input [value]="text">'
})
export class Template2Component extends BaseComponent{} 

现在你可以像这样简单地使用它们:

app.component.html

<button (click)="template = (template == 1) ? 2 : 1">Change template</button>
<br><br>
<ng-container [ngSwitch]="template">
  <template1 text="Template1 input text" *ngSwitchCase="1"></template1>
  <template2 text="Template2" *ngSwitchCase="2"></template2>
</ng-container>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  template = 1;
}

看一下工作示例 here

希望这会有所帮助。