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

Question

正如您在下图中看到的那样，它不适合我。模板 html 出现在表格上方，而不是我预期的标题下方。

我想要做的是创建一个可选的过滤器组件来处理表格数据。添加组件时，它应该在标题列下方显示一个额外的行，并带有输入/按钮，允许您在特定列上放置过滤器。

所以很明显我做错了什么，或者做我不应该做的事情。如果是这样，如何正确注入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 issue 中有一些很好的提示：https://github.com/aurelia/binding/issues/409