Angular2 [innerHtml] тег angular2 не работает

Я хочу вставить html в свой a-компонент с тегами angular2 из другого компонента.

@Component({
  selector: 'app-root',
  template: '<app-a [my-html]="my-html"> </app-a>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  my-html= '<span> {{variableFromAComponent}}</span>';
}



@Component({
      selector: 'app-a',
      template: '<div [innerHtml]="my-html"> </div>',
    })
    export class AComponent {
      @Input('my-html') my-html:any;
      public variableFromAComponent='its work!'; 
    }

Я хочу видеть результат: это работа! (из variableFromAComponent) Но я вижу {{variableFromAComponent}} (теги angular2 не работают).


typescript angular innerhtml
person Andrei    schedule 05.01.2017    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Я нашел решение в angular2-dynamic-component.

<template dynamic-component
          [componentContext]="self"
          [componentModules]="dynamicExtraModules"
          [componentTemplate]='"here html tags with angular2 tags"'>
</template>
person Andrei    schedule 06.01.2017

arrow_upward
0
arrow_downward

Angular вообще не обрабатывает HTML, добавленный [innerHTML]="...". Просто добавляется как есть и все. Возможно, вам даже понадобится использовать дезинфицирующее средство, чтобы ничего не удалялось из соображений безопасности (см. -using-binding-syntax/37076868#37076868">В RC.1 некоторые стили нельзя добавить с помощью синтаксиса привязки).

Если вы хотите динамически добавлять компоненты, вы можете использовать ViewContainerRef.createComponent(), например, как описано в Динамические вкладки Angular 2 с компонентами, выбранными пользователем

person Günter Zöchbauer    schedule 05.01.2017
comment
Конечно, нет. Как я уже сказал, Angular2 не создает компоненты для HTML, добавленного таким образом. - person Günter Zöchbauer; 06.01.2017
comment
я смотрел ваш пример для загрузки динамических вкладок. Я не хочу загружать компоненты, я хочу загружать свой html с тегами Angular2. Моя задача - загрузить html с тегами angular2 с сервера и отобразить его в других компонентах. - person Andrei; 06.01.2017
comment
Есть ответы, которые показывают, как создавать новые компоненты во время выполнения. Это единственный способ создать компоненты из HTML, загруженного во время выполнения. Найдите $compile (сейчас только на телефоне) - person Günter Zöchbauer; 06.01.2017
comment
Большое спасибо за Вашу помощь. Я взял angular2-dynamic-component - person Andrei; 06.01.2017

arrow_upward
0
arrow_downward

Есть несколько способов сделать это.

ВЗАИМОДЕЙСТВИЕ С КОМПОНЕНТАМИ

Если между компонентами существует отношение родитель/потомок, вы можете использовать Input() и Output() для передачи значений между ними.

Этот дочерний компонент получает значение через Input()

child.component.ts

import { Component, Input } from '@angular/core';
@Component({
  selector: 'child',
  template: '<div>{{myHtml}}</div>', // these curly braces add the text as innerHTML
  providers: [ FoodsService]
})
export class ChildComponent implements OnInit {
   @Input() myHtml: string;
}

который передается от родителя через шаблон:

parent.component.html

<child [myHtml]="'You're String Here (or a variable set to "its work")'"></child>

Вы можете использовать Output() для перехода от дочернего к родительскому.

УСЛУГИ

Другой способ — создать службу, которая внедряется в оба компонента. Один компонент может отправить значение службе, а другой — получить это значение. В Angular2 это часто достигается с помощью observables для объекта данных.

person Nate May    schedule 05.01.2017
comment
Я не просто использовал innerHtml. Я попробовал ваше решение, в результате теги html и теги angular2 не работают - person Andrei; 06.01.2017

arrow_upward
-1
arrow_downward

Для этого вы можете использовать класс Renderer2.

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

constructor (
  private elementRef: ElementRef,
  private renderer: Renderer
) {}

public ngAfertViewInit(): void {
  this.renderer
     .setElementProperty(
        this.elementRef.nativeElement, 
        'innerHTML',
        '<h1> Nice Title </h1>'
     );
}
person jgatjens    schedule 09.05.2017
comment
@Andrei Андрей Я смог визуализировать графики d3 с помощью этого на сервере на прошлой неделе, это экспериментально, но если вы не работаете, используйте вместо этого класс Renderer. - person jgatjens; 11.05.2017