Question

我在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

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

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

希望这会有所帮助。

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

1 个答案: