05 янв. 2017 г., 22:42 от Andrei

Тег 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 не работают).

Ответы на вопрос (0)

06 янв. 2017 г., 17:44 от Andrei

Я нашел решение вangular2-динамическая составляющая

<template dynamic-component
          [componentContext]="self"
          [componentModules]="dynamicExtraModules"
          [componentTemplate]='"here html tags with angular2 tags"'>
</template>
09 мая 2017 г., 06:14 от jgatjens

Ты можешь использоватьRend, erer2 Class за это.

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>'
     );
}
05 янв. 2017 г., 22:13 от Nate May

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

Если между компонентами есть родительские / дочерние отношения, вы можете использовать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 это часто достигается с помощьюнаблюдаемые к объекту данных.

05 янв. 2017 г., 21:44 от 332k

[innerHTML]="..." совсем. Он просто добавлен как есть и все. Возможно, вам даже понадобится использовать Sanitizer, поэтому по соображениям безопасности ничего не удаляется (см.В RC.1 некоторые стили не могут быть добавлены с использованием синтаксиса привязки).

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

ВАШ ОТВЕТ НА ВОПРОС