Aurelia：如何在现有 html 中注入组件模板？

Question

正如您在下图中所看到的，它不适合我。模板 html 出现在 table 上方，而不是我预期的 header 下方。

我想做的是创建一个可选的过滤器组件，该组件可以处理 table 数据。添加组件时，它应该在 header 列下方显示一个额外的行 inputs/button 允许您在特定列上放置过滤器。

所以很明显我做错了什么，或者做了一些我不应该做的事情。如果是这样，我该如何正确注入 filter-table 组件的模板？

我的app.html.

   <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th></th>
                <th>Name</th>
                <th>City</th>
                <th>Username</th>
                <th>Email</th>
                <th>Nationality</th>
            </tr>
            <table-filter containerless></table-filter>
        </thead>
        <tbody>
            <tr>
                <td>??</td>
                <td>Name</td>
                <td>City</td>
                <td>Username</td>
                <td>Email</td>
                <td>Nationality</td>
            </tr>
        </tbody>
    <table>

我的 table-filter 组件。

// Viewmodel
@customElement('table-filter')
export class TableFilterComponent {
    // Nothing here    
}

// Template
<template>
    <tr>
        <th>Filter header 1</th>
        <th>Filter header 2</th>
        <th>Filter header 3</th>
        <th>Filter header 4</th>
        <th>Filter header 5</th>
        <th>Filter header 6</th>
    </tr>
</template>

Answer 1

我打赌这是因为 <table-filter /> 不是 <thead /> 元素内的有效元素。

试试这个，看看它是否有效：

<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>City</th>
        <th>Username</th>
        <th>Email</th>
        <th>Nationality</th>
    </tr>
    <tr as-element="table-filter" containerless></table-filter>
</thead>

然后只需删除自定义元素模板中的 <tr /> 元素即可。

<template>
   <th>Filter header 1</th>
   <th>Filter header 2</th>
   <th>Filter header 3</th>
   <th>Filter header 4</th>
   <th>Filter header 5</th>
   <th>Filter header 6</th>
</template>

最后，这个 Github 问题有一些好的提示：https://github.com/aurelia/binding/issues/409

Aurelia：如何在现有 html 中注入组件模板？

Aurelia: How do I inject a component template in existing html?

aurelia

aurelia-templating