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问题中有一些很好的提示:https://github.com/aurelia/binding/issues/409