Angular 8：将 html 作为输入变量传递

Question

我们可以使用@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 作为输入。

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>