{ "uiSetting" : "ui-type-one" } @Component({ selector: 'base-strategy', templateUrl: './base.component.html', styleUrls: ['./base.component.css'] }) export class BaseStrategy { } @Component({ selector: 'ui-type-one-strategy', templateUrl: './UiTypeOne.component.html', styleUrls: ['./ui-type-one.component.css'] }) export class UiTypeOneStrategy extends BaseStrategy { } @Component({ selector: 'ui-type-two-strategy', templateUrl: './UiTypeTwo.component.html', styleUrls: ['./ui-type-two.component.css'] }) export class UiTypeTwoStrategy extends BaseStrategy { }HTML será así.
<!-- If response received is ui-type-one this should show UI of ui-type-one-strategy. If response received is ui-type-two this should show UI of ui-type-two-strategy. and so on. --> <base-strategy></base-strategy>Conozco ng-template en angular pero quiero usarlo como última opción, soy nuevo en angular, por lo tanto, quería saber si existe alguna forma de definir la estrategia de IU en función de la respuesta.
Puede crear componentes de forma dinámica utilizando Dynamic Component Loader.
Angular proporciona ComponentFactoryResolver que se puede usar junto con ViewContainerRef para cargar componentes dinámicamente.
En su caso, tal vez en función de la respuesta, puede cargar dinámicamente el componente.
Vistazo del código:
async load(comp: string) { let component: Type<any>; switch (comp) { case 'A': { component = (await import('./comp-a/comp-a.module')).default; break; } case 'B': { component = (await import('./comp-b/comp-b.module')).default; break; } } const factory = this.cfr.resolveComponentFactory(component); this.container?.clear(); this.container.createComponent(factory); }Demostración: https://stackblitz.com/edit/angular-ivy-n2zrqt?file=src%2Fapp%2Fapp.component.ts
Documentos: https://angular.io/guide/dynamic-component-loader#loading-components
En Angular v13, los componentes se pueden crear sin necesidad de ComponentFactoryResolver . Consulte el blog aquí: https://blog.angular.io/angular-v13-is-now-disponible-cce66f7bc296