5

我正在使用 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']
})

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

4

1 回答 1

2

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

base.component.ts

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

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

模板1.component.ts

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

模板2.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;
}

看看这里的工作示例

希望这会有所帮助。

于 2019-09-17T09:11:02.897 回答