时间戳

首页 > 解决方案 > Angular 8：将 html 作为输入变量传递

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

问题描述

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

标签： angularinputangular8

解决方案

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

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

推荐阅读