Angular 8 : Passing html as input variable

Question

我们可以使用@Input 作为传递输入 Prop 或数据。我们也可以使用 <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 作为输入。

Answer 1

我找到了解决方案，这可以通过以下方式完成:

<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>