Ember `partial` 模板与组件

Question

我正在尝试在具有不同内容的多个页面中使用单个组件。为此，我正在尝试使用 partial 模板方法。但是我发现我的方法是错误的。有人建议我正确的方法吗？

路线名称：my-route 和 my-service 都使用相同的组件 my-component。我的组件也总是有一些默认信息..但部分如何在不同页面上显示不同内容？

我的部分在模板 partials 文件夹中。

这是我的尝试：

<h2>This is my Route page</h2>
{{#my-component}}
 <!-- default content should be here -->
{{partial "partials/my-service-partial"}}
{{/my-component}}

这是我的现场演示：Live Demo in Twiddle

Answer 1

为了能够将传递的块呈现给组件，您应该使用 {{ yield }}，因此您的组件模板应如下所示：

{{!-- templates/component/my-component.hbs --}}
<div class="parent">
    <h2>Loaded from component default</h2>
    {{ yield }}
</div>

您可以在指南中找到更多信息 - Wrapping Content in a Component

Ember `partial` templating with component