如何让 ng-content 选择过滤器与投影模板内容一起使用？

Question

我有一个用于呈现列表的List 组件。 （嗯，我没有，但我试图将我的问题提炼成一个易于理解的点头示例）。

List 组件的模板具有一个或多个 ListItem 组件，这些组件允许定义列表项，如下所示：

<app-list>
  <app-list-item text='foo'></app-list-item>
  <app-list-item text='bar'></app-list-item>
</app-list>

...应该呈现为：

• 富
• 酒吧

我也有（假设）一个使用List 组件的Reminder 组件。 Reminder 组件有一个deadline 属性，在这个截止日期之前要做的事情列表在组件的模板中定义，使用我们之前看到的一个或多个ListItem 组件：

<app-reminder deadline='Today'>
  <app-list-item text='foo'></app-list-item>
  <app-list-item text='bar'></app-list-item>
</app-reminder>

这应该呈现为：

记得在今天之前做到以下几点：

• 富
• 酒吧

List 组件非常简单：

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <ng-content></ng-content>
    </ul>
  `
})
export class ListComponent{
  @ContentChildren(ListItemComponent) public readonly items: QueryList<ListItemComponent>;
}

ListItem 组件更简单：

@Component({
  selector: 'app-list-item',
  template: '<li>{{text}}</li>'
})
export class ListItemComponent {
  @Input() public text;
}

最后，Reminder 组件也很简单：

@Component({
  selector: 'app-reminder',
  template: `
    <h2>Remeber to do the following by {{deadline}}</h2>
    <app-list>
      <ng-content></ng-content>
    </app-list>
  `
})
export class ReminderComponent {
  @Input() public deadline: string;
}

将这些组件与上面显示的模板 sn-ps 一起使用可以正常工作。您可以在 this StackBlitz 中看到这一点。

现在进入问题的重点。 List 组件和Reminder 组件都使用<ng-content>。在这两种情况下，我们都不想将 所有 内容投影到列表中 - 只是 <app-list-item> 元素。

如果我像这样更改Reminder 组件模板中的<ng-content> 标记：

<ng-content select='app-list-item'></ng-content>

...那么组件仍然可以工作，并排除其模板中的任何其他内容，这正是我们想要的。

如果我对 List 组件的模板中的 <ng-content> 标记进行相同的更改，这也适用于像这样的简单模板：

<app-list>
  <app-list-item text='foo'></app-list-item>
  <app-list-item text='bar'></app-list-item>
  <h1>EXCLUDE ME</h1>
</app-list>

但是，最后的更改（在List 组件的模板中添加select 过滤器到<ng-content> 元素）使Reminder 组件停止工作。提醒中不呈现任何列表项。

我想这可能是因为Reminder 组件的模板渲染的List 组件看到的是渲染的 内容（<li> 标签）而不是模板 em> 内容（<app-list-item> 标签）。

似乎我在这里有一个不愉快的选择 - 我可以不限制将由 List 组件呈现的内容类型（在这种情况下，可能会包含任何旧垃圾） ，或在创建其他组件时失去使用List 组件的能力。

或者我错过了什么？有没有其他方法可以做到这一点？

Answer 1

我设法通过使用ngProjectAs 解决了这个问题。

reminder.component.ts

@Component({
  selector: 'app-reminder',
  template: `
    <h2>Remeber to do the following by {{deadline}}</h2>
    <app-list>
      <ng-container ngProjectAs="'app-list-item'">
        <ng-content select='app-list-item'></ng-content>
      </ng-container>
    </app-list>
  `
})
export class ReminderComponent {
  @Input() public deadline: string;
}

Here is the StackBlitz demo.