Построить селектор компонента через @Input - PullRequest
Новая
       27

Построить селектор компонента через @Input

0 голосов
/ 27 января 2019

Как можно создать селектор программно в Angular?

Допустим, у меня есть родительский компонент с именем header.component, который выглядит следующим образом; 

export class ContentHeaderComponent {
  @Input() iconName: string;
}

... и яс помощью Angular Feather для добавления значков в приложение, для создания которого требуется следующее: 

<i-chevron-down></i-chevron-down>

В моем шаблоне компонента заголовка я хочу передать тегу «chevron-down» через тег родительского элементасоставная часть.В сущности, я собираюсь сделать что-то подобное в компоненте заголовка: 

<i-{{ iconName }}></i-{{ iconName }}>

Возможно ли в Angular создание селектора на лету?

Ответы [ 3 ]

0 голосов
/ 27 января 2019

Ваш вариант использования был бы действительно простым, если бы вы использовали css или подход на основе лигатуры , но поскольку в вашей библиотеке 1 комп на иконку и у них практически нет общего интерфейса, AFAIK практически существуетневозможно сопоставить строку с соответствующим классом компонента.

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

Вы можете попробовать следующую идею: вместо передачи имени значка вы можете передать шаблон с нужным значком и встроить его в компонент.Это можно сделать следующим образом: 

@Component({
  selector: 'foo-header'
})
export class ContentHeaderComponent {
  @Input() iconTemplate: TemplateRef<any>;
}

content-header.component.html 

<ng-container *ngIf="iconTemplate">
  <ng-container [ngTemplateOutlet]="iconTemplate"></ng-container>
</ng-container>

foo.component.html 

<foo-header [iconTemplate]="iconRef"></foo-header>
<ng-template #iconRef>
  <i-chevron-down></i-foo-icon>
</ng-template>

Другой подход заключается в прямом включении разметки значков в компонент: 

@Component({
  selector: 'foo-header'
})
export class ContentHeaderComponent {}

content-header.component.html 

<ng-content select="[header-icon]"></ng-content>

foo.component.html 

<foo-header>
  <i-chevron-down header-icon></i-foo-icon>
</foo-header>

Об этих подходах и их плюсах / минусах вы можете прочитать в этой статье .

0 голосов
/ 27 января 2019

Невозможно динамически создать селектор углового компонента в угловом, поскольку Angular должен скомпилировать этот элемент. Однако вы можете сделать это для веб-компонентов, скомпилировав ваш угловой компонент в угловые элементы, а затем динамически вставить эти веб-компоненты в DOM.

0 голосов
/ 27 января 2019

Впоследствии можно использовать Renderer2 вместо ответа @epsilon -s.

Используйте это как: 

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    const icon = this.renderer.createElement('i-chevron-down')

    this.renderer.appendChild(this.el.nativeElement, icon)
  }

И, конечно, вы можете добавить любые переменные в эту строку.Также не забудьте удалить элемент в OnDestroy жизненном цикле

...