Как в Angular2 навесить события и обращаться к атрибутам для html пришедшего из api?

Question

[GregIv]

Добрый день!

Есть задача, передать html с нестандартными тегами и атребутами с Rest API в Angular2.
После передачи, Angular должен уметь взаимодействовать с этим html. Обрабатывать клики по нему, получать значения атребутов и т. п.

Подскажите в какую сторону копать?

Пример html:

<some-container>
        <some-tag some-id="123123" >text</some-tag>
</some-container>

Необходимо обрабатывать клики по some-tag, и получать значение some-id

Answer 1

[0X12eb]

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

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'

@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) { }
    transform(value: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

Затем рендерим контент который пришел из RestAPI и работаем со всеми пришедшими тегами и атрибутами:

<div [innerHTML]="data.content | safeHtml"></div>

Answer 2

[GregIv]

Да, я именно так и сделал + создал директивы для необходимых тегов. Но html не превращается в сущности ангуляра... Как его дополнительно инициализировать, как шаблон, не понятно(

Comments

[0X12eb]

Т.е. Вы хотите рабочие директивы ангуляра из темплейта который пришел по http ?
Интересно узнать, какая задача вызвала столько такое странное требование.

Решение есть:
1. Делаем свою фабрику создания динамических компонентов:

createNewComponent (tmpl:string) {
  @Component({
      selector: 'dynamic-component',
      template: tmpl,
  })
  class CustomDynamicComponent  implements IHaveDynamicData {
      @Input()  public entity: any;
  };
  // компонент для пришедшего темплейта
  return CustomDynamicComponent;
}

2. Инъекция компонента в NgModule:

createComponentModule (componentType: any) {
  @NgModule({
    imports: [
      PartsModule,
    ],
    declarations: [
      componentType
    ],
  })
  class RuntimeComponentModule
  {
  }
  // Рантайм модуль на выходе для инъекции
  return RuntimeComponentModule;
}

3. Создаем фабрику компонентов и кешируем ее

public createComponentFactory(template: string)
    : Promise<ComponentFactory<IHaveDynamicData>> {    
    let factory = this._cacheOfFactories[template];

    if (factory) {
        console.log("Module and Type are returned from cache")

        return new Promise((resolve) => {
            resolve(factory);
        });
    }

    // если неизвестный тип - создаем его
    let type   = this.createNewComponent(template);
    let module = this.createComponentModule(type);

    return new Promise((resolve) => {
        this.compiler
            .compileModuleAndAllComponentsAsync(module)
            .then((moduleWithFactories) =>
            {
                factory = _.find(moduleWithFactories.componentFactories
                                , { componentType: type });

                this._cacheOfFactories[template] = factory;

                resolve(factory);
            });
    });
}

4. Фрагмент кода как использовать вышеперечисленные шаги:

// Здесь мы получаем фабрику (просто забираем ее из кеша)
  this.typeBuilder
      .createComponentFactory(template)
      .then((factory: ComponentFactory<IHaveDynamicData>) =>
    {
        // Создаем компонент и инъекцируем его (для получения ссылки на него)
        this.componentRef = this
            .dynamicComponentTarget
            .createComponent(factory);

        // инъекция @Inputs в инстанс компонента
        let component = this.componentRef.instance;

        component.entity = this.entity;
        //...
    });

5. Ознакомьтесь с этим Ответ на похожий вопрос и подумайте еще раз - Вам действительно это нужно?

6. Посмотрите на рабочий пример: Plnkr

[GregIv]

0X12eb: НА сервере в БД лежит по сути текст, где многие слова обернуты не стандартным html тегом, и на эти слова надо навесить различные действия.
Спасибо за развернутый ответ, буду эксперементировать, отпишусь по результатам!