Question

我看到很多关于转化的文章，但是有很多解决想象中的问题。有人可以告诉我在<ng-content></ng-content>标签中应该设置哪些内容？

Answer 1

Transclusion是一种从此组件外部向角度组件的模板添加HTML模板的方法。

一个例子将比我更好地解释这个概念：

<custom-component>
  <!-- HTML template added to the custom-component's template through transclusion -->
  <div class="row">
    <div class="col-sm-12>
      <p>My HTML template</p>
    </div>
  </div>
  <!-- End of the HTML template -->
</custom-component>

为了使翻译工作正如您所指出的那样，您需要使用 ng-content 标记。此标记指示Angular应在组件模板中呈现外部HTML模板的位置。

想象一下以下自定义组件模板：

<div class="wrapper">
  <div class="container">
    <section>
      <ng-content></ng-content>
    </section>
    <footer>
      <!-- Something -->
    </footer>
  </div>
</div>

ng-content将被替换为：

<div class="wrapper">
  <div class="container">
    <section>
      <!-- HTML template added to the custom-component's template through transclusion -->
      <div class="row">
        <div class="col-sm-12>
          <p>My HTML template</p>
        </div>
      </div>
      <!-- End of the HTML template -->
    </section>
    <footer>
      <!-- Something -->
    </footer>
  </div>
</div>

要回答您的问题，我会说您可以通过在角度组件的开始和结束标记内添加一些HTML来“设置在ng-content标记内部呈现的内容”。

如何设置<ng-content>标签内的渲染内容？

1 个答案: