Question

我正在尝试使用自定义结构指令，以节省编写样板模板代码的时间。所需的语法如下：

/* pageWithTabDialog.component.html */
<div *tabDialog="['tabA', 'tabB']">
  <form>/* I am a form, please don't tabify me */
    <tabA>/* HTML for the first tab */</tabA>
    <tabB>/* HTML for the second tab */</tabB>
  </form>
</div>

它会生成这样的东西：

 <div class="tabs-container">
    <div class="tab-links">
      <ul *ngFor="let t of tabs">
        <li [class.active]="activeTab == t"><a (click)="activeTab = t">{{ t }}</a></li>
      </ul>
  </div>
  <div #pages class="tab-pages" *ngFor="let t of tabs">
    <{{ t }} *ngIf="activeTab == t">
      Sample content for the {{ t }} tab.
    </{{ t }}>
  </div>

需要注意的是所有问题所在：目的是在编译时将两个模板组合，这样在使用中定义tabA时，其内容将替换“示例内容“文字。此外，如果可能，应保留模板的其他部分，即上面的<form>元素。

这只能使用TabDialogDirective吗？值得注意的是，在指令范围内，我们没有使用TemplateRef做任何事情，但如果我们可以引用另一个，那么这不是一个破坏者。
除了pageWithTabDialog之外，我还需要使用第二个组件吗？

使用指令注入模板

0 个答案: