Question

我有一个生成表行的子组件。由于Angular2 messes the output with the component-selector会在表格行中导致无效的html，如<my-child-component>，我需要致富这一点。另一个问题中的解决方案不可解决，因为我需要访问子组件中的<tr>元素。

我的想法是将<template>标记用于我的子组件的属性：

@Component({
    selector: '[childRow]',
    template:  `
<tr>
<td>Test</td>
</tr>
       `
    });

在主要组件

中

<table>
    <thead>
        <template childRow></template>
    </thead>
</table>

导致异常

未处理的Promise拒绝：模板解析错误：组件上的嵌入式模板：TimetableRowComponent

由<template>标记引起。使用像<div childRow>这样的另一个元素可以正常工作，就像组件选择器<childRow>一样（在这种情况下，当然在子组件的选择器中没有sqare括号）。

我该如何解决这个问题？我的目标就是我说生成有效的HTML。因此，我不希望在输出中使用<childRow>，<div>或任何其他元素，这些元素在HTML表格中无效。这似乎使用<template>就像这个例子一样有效：

<template ngFor let-row [ngForOf]="myArray">
      <tr>
          {{row.memberA}}</td>
      </tr>
</template>

但为什么我不能让Angular 2在<template>标签内呈现子模板？

在<template>标记上使用自定义组件选择器，以避免模板标记

0 个答案: