angular - 如何获得 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>

...应呈现为:

• foo
• bar

我也有(假设)一个 Reminder使用 List 的组件成分。 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>

这应该呈现为:

Remember to do the following by Today:

• foo
• bar

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;
}

将这些组件与上面显示的模板片段一起使用效果很好。您可以在 this StackBlitz 中看到这一点。 .

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

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

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

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

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

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

然而 ，最后一次更改(将 select 过滤器添加到 <ng-content> 组件模板中的 List 元素)停止了 Reminder组件从工作。提醒中不呈现任何列表项。

我想这可能是因为 List由 Reminder 呈现的组件组件的模板看到呈现的内容( <li> 标签)而不是模板内容( <app-list-item> 标签)。

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

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

Answer 1

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

提醒.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 .