В Angular 6+ есть способ динамически добавлять директиву в элемент - PullRequest
Новая
       71

В Angular 6+ есть способ динамически добавлять директиву в элемент

0 голосов
/ 03 апреля 2019

На самом деле, я ищу метод для динамической передачи директив компонентам Angular 6+.

Сначала я следовал динамическим компонентам, но я обнаружил, что он не очень динамичен, потому что вы должны знать,предварительно составьте список компонентов и импортируйте их.Затем я нашел хорошее решение с помощью ng-dynamic, но проблема с этим решением в том, что мы не можем использовать Input, Output и директивы не срабатывают.Ссылка: https://www.arka.com/blog/dynamically-generate-angular-components-from-external-html

app.component.ts: 

dynamic_content = "<app-test appTest></app-test>";

app.component.html: 

<dynamic-html [content]="dynamic_content"></dynamic-html>

test.component.html: 

<p> Hello World </p>

test.directive.ts: 

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appTest]'
})
export class TestDirective {

  constructor(private _el: ElementRef, private _renderer: Renderer2) { }

  ngAfterViewInit(): void {
    this._renderer.setStyle(this._el.nativeElement, 'color', 'red');

  }

}

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

...