выберите угловой шаблон в функции компонента вместо добавления в @Component

Я работаю в 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']
})

Я хочу, чтобы это было в любой функции, будь то конструктор или любая другая функция. Все будет в порядке, если для решения будет использоваться какой-либо дочерний компонент или директивная логика, мне нужно только выбрать шаблон для этой логики. Обычно я буду передавать одни и те же данные во все шаблоны, изменится только их дизайн.


angular angular-dynamic-components
person Muhammad Aadil Banaras    schedule 17.09.2019    source источник
comment
Пробовали ли вы что-то вроде динамического загрузчика компонентов angular.io/guide/dynamic-component-loader ?   -  person Bozhinovski    schedule 17.09.2019
comment
да, но это не решает мой запрос, так как я загружаю данные только динамически, мне нужно, чтобы шаблоны выбирались динамически.   -  person Muhammad Aadil Banaras    schedule 18.09.2019

Ответы (1)


arrow_upward
1
arrow_downward

У меня была та же проблема, и я искал то же решение, о котором вы просите, но я его не нашел. Я решил проблему с наследованием. Вы должны создать компонент без какого-либо шаблона, который будет родительским классом. Этот компонент будет содержать всю необходимую вам логику. Я вставляю только ввод, чтобы показать, как это работает:

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;
}

Взгляните на рабочий пример здесь

Надеюсь, это поможет.

person Federico Galfione    schedule 17.09.2019
comment
да, это кажется отличным, но все же вы добавляете шаблон как фиксированный в дочерних компонентах, например, вы добавили 2 дочерних компонента и выбрали, какой из них использовать по логике, моя проблема в том, что я могу использовать дочерний компонент, но шаблоны должны быть выбраны логика, например, родительский компонент отправляет данные дочернему, например, используйте шаблон abc.html или dd.html, тогда этот дочерний компонент должен добавить это как шаблон. не похоже на добавление компонента для нового шаблона, мне нужен один компонент, чтобы выбрать любой из заданных шаблонов. - person Muhammad Aadil Banaras; 18.09.2019