Блог

Ниже приведен пользовательский компонент:

 <app-variable-component-1></app-variable-component-1>
  

Итак, моя идея заключается в том, что когда пользователь изменяет ввод, т.е. нажимает или выбирает опцию, тогда текущее выбранное значение будет сохранено в свойстве внутри родительского компонента.

Вот так:

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

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.less']
})
export class ParentComponentComponent implements OnInit {

currentOption = 1

  constructor() { }

  ngOnInit(): void {
  }

onSelectOption(option) {
this.currentOption = option
}

}

  

используя это свойство, я хочу динамически изменять компонент. Я знаю, что мог бы использовать *ngIf для каждого элемента, подобного этому:

 <app-variable-component-1 *ngIf="currentOption === '1'"></app-variable-component-1>
<app-variable-component-2 *ngIf="currentOption === '2'"></app-variable-component-2>
<app-variable-component-3 *ngIf="currentOption === '3'"></app-variable-component-3>
  

Но вместо этого я хочу сократить код примерно так:

 <app-variable-component-{{currentOption}} ></app-variable-component-{{currentOption}}>

  

Возможно ли что-то подобное в angular?

Я не знаю, возможен ли такой способ, но вы можете создать экземпляр динамического компонента с ngComponentOutlet помощью директивы. Вы передаете активный компонент в директиве.

В HTML:

 <ng-container *ngComponentOutlet="activeComponent"></ng-container>
  

В TS:

 import { Component1 } from './../component1';
import { Component2 } from './../component2';


/** ...SOME DECLARATIONS HERE.... **/

get activeComponent() {
 switch(this.currentOption) {
   case 1: return Component1;
   case 2 : return Component2;
 }
}
  

то, что у вас есть, невыполнимо, вы можете использовать ngSwitch , чтобы немного его очистить:

 <div [ngSwitch]="currentOption">
  <app-variable-component-1 *ngSwitchCase="'1'"></app-variable-component-1>
  <app-variable-component-2 *ngSwitchCase="'2'"></app-variable-component-2>
  <app-variable-component-3 *ngSwitchCase="'3'"></app-variable-component-3>
</div>
  

полагаться на такие имена селекторов, как правило, не очень хорошо масштабируется в любом случае, и его будет сложно поддерживать в более крупном приложении.