Angular 5 динамически вставляет компонент в существующую разметку? - PullRequest
Новая
       8

Angular 5 динамически вставляет компонент в существующую разметку?

0 голосов
/ 29 августа 2018

Вот мой сценарий. Пользователи вводят контент с помощью редактора tinyMCE, и я отображаю этот контент пользователю в таком компоненте, например: 

@Component({
    template: '
        <h3>Description</h3>
        <div [innerHTML]="content"></div>
    '
})
export class DetailsComponent implements OnInit {

    content: string = "";

    constructor(private service: any){}

    ngOnInit(){
        this.service.loadDetails().pipe(
            tap((result) => this.content = result)
        ).subscribe();
    }
}

Теперь контент с сервера может быть любым. Так что, если сервер возвращает этот контент:

<p>This is my content from the server. <img src="..." /></p>

Тогда мой DetailsComponent вывод будет выглядеть так: 

<h3>Description</h3>
<div>
    <p>This is my content from the server. <img src="..." /></p>
</div>

Я хочу написать компонент для замены любых изображений пользовательским компонентом. Как вы делаете это без использования существующей ссылки #template?

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

<h3>Description</h3>
<div>
    <p>This is my content from the server. <custom-component><img src="..." /></custom-component></p>
</div>

1 Ответ

0 голосов
/ 29 августа 2018

Нашел решение, отработав этот пример SO

Вот как я решил проблему. 

update() {

    let images = this.el.nativeElement.querySelectorAll('img');

    for (let x = 0; x < images.length; x++) {
        const img = images[x];

        let clone = img.cloneNode(true);
        // Important because angular removes all children of a node. 
        // So wrap the image, and then use the wrapper as the root node for the component to attach to
        $(img).wrap("<span />");
        let factory = this.factoryResolver.resolveComponentFactory(CustomComponent);
        let ref = factory.create(this.injector, [[clone]], img.parentNode); //use a clone as the projectable node, and use its parent (the wrapper span) as the rootNode

        this.applicationRef.attachView(ref.hostView);
        ref.changeDetectorRef.detectChanges();
        this.components.push(ref); //save the references later so that I can destroy them
    }
}
...