Угловой 8: передача HTML в качестве входной переменной - PullRequest
Новая
       6

Угловой 8: передача HTML в качестве входной переменной

1 голос
/ 06 ноября 2019

Мы можем использовать @Input в качестве входных реквизитов или данных. Мы также можем использовать <ng-content> для выгрузки html в дочерний компонент. Есть ли способ передать HTML в качестве ввода. Как @Input html1, @Input html2 и использовать их в дочернем компоненте класса?

Предположим, у меня есть этот html в дочернем классе: 

<div class='wrapper'>
  <div class="content1 exclusive-css-defined-to-this-component">
     <div>{$content1}</div>
  </div>
  <div class="content2 exclusive-css-defined-to-this-component-2">
    <div>{$content2}</div>
  </div>
</div>

И я хочу передать $ content1 &$ content2 в качестве ввода.

Ответы [ 3 ]

0 голосов
/ 06 ноября 2019

Мы можем использовать innerHTML для достижения этого

Пример, демонстрирующий это,

parent.component.ts, 

export class ParentComponent {
  htmlOneAsString = `
    <div>Welcome Text Header</div>
  `;

  htmlTwoAsString = `
    <div>Welcome Text Content</div>
  `;

  htmlAsString = `
    <div><div>${this.htmlOneAsString}</div><div>${this.htmlTwoAsString}</div></div>
  `;
}

parent. component.html, 

<child [innerHTML]="htmlAsString"></child>

child.component.ts, 

@Component({
  selector: 'child'
})
export class ChildComponent {
  @Input() htmlAsString: string;
}

child.component.html, 

<div>{{htmlAsString}}</div>
0 голосов
/ 14 ноября 2019

Я нашел решение, это можно сделать с помощью: 

<div class='wrapper'>
  <div class="exclusive-css-defined-to-this-component">
     <div><ng-content select="[content1]"></ng-content></div>
  </div>
  <div class="exclusive-css-defined-to-this-component-2">
    <div><ng-content select="[content2]"></ng-content></div>
  </div>
</div>

И мы можем использовать такой компонент, как: 

<wrapper>
   <div content>Any thing you want to put in content1</div>
   <div content2>Any thing you want to put in content2</div>
</wrapper>
0 голосов
/ 06 ноября 2019

Вы можете поместить свой html в строку типа 

htmlStr = "<strong>This is an example</strong>";

и передать ее службе: 

this.whateverService.setHtml(this.htmlStr);

, затем в принимающем компоненте: 

import { WhateverService } from 'src/app/shared/service/whatever.service';

export class ReceivingComponentThing implements OnInit {
 htmlExample = '';

constructor(private whateverService: WhateverService) {}
}

ngOnInit() {
 // have a getter/setter in service however you like
 this.htmlExample = this.whateverService.getHtmlExample();
}

в вашем шаблоне: 

<div [innerHtml]="htmlExample"><div>
...