无法让 ng-content 的 select 正确过滤

Question

我正在尝试使用 ng-content 在某些区域有选择地显示某些组件，但我没有让过滤正常工作。

我有一个布局组件，其中包含某些组件，这些组件在需要呈现的地方标有指令。

    <standard-layout class="blah">
        <sample-navigation *navBarItem></sample-navigation>
        <sample-navigation *navBarItem></sample-navigation>
        <sample-form-1 *contentItem></sample-form-1>
        <sample-form-2 *contentItem></sample-form-2>
        <sample-form-3 *contentItem></sample-form-3>
        <sample-navigation *actionBarItem></sample-navigation>
        <sample-navigation *actionBarItem></sample-navigation>
    </standard-layout>

这是我的 contentItem 指令：

@Directive(selector: '[contentItem]')
class ContentItemDirective implements AfterContentInit {
    final ViewContainerRef vcRef;
    final TemplateRef template;
    final ComponentResolver componentResolver;

    ContentItemDirective(this.vcRef, this.template, this.componentResolver);

    ComponentRef componentRef;

    @override
    ngAfterContentInit() async {
        final componentFactory =
        await componentResolver.resolveComponent(ContentItem);
        componentRef = vcRef.createComponent(componentFactory);
        (componentRef.instance as ContentItem)
            ..template = template;
    }

}

这就是我的 ContentItem 的样子

@Component(
    selector: "content-item",
    host: const {
        '[class.content-item]': true,
    },
    template: """
        <template [ngTemplateOutlet]="template"></template>
    """,
    directives: const [NgTemplateOutlet]
)
class ContentItem {
    TemplateRef template;
}

在 standard-layout 的模板中，当我执行 <ng-content select=""></ng-content> 时，它会按预期显示所有组件。

当我尝试过滤组件时，它似乎不起作用：

CSS 过滤后什么都不显示：

<ng-content select=".content-item"></ng-content>

过滤 content-item 标签本身也不显示任何内容：

<ng-content select="[content-item]"></ng-content>

我已经尝试了 select=... 的许多排列组合，但似乎无法正常工作。有什么想法吗？

我在 Angular Dart 3.0.0 包中。

Answer 1

设法使用 @ContentChildren

让它工作

在我的 StandardLayout 组件中，我使用以下方法过滤了输入：

@ContentChildren(ContentItemDirective)
QueryList<ContentItemDirective> contentItems;

@ContentChildren(ActionBarItemDirective)
QueryList<ActionBarItemDirective> actionBarItems;

@ContentChildren(NavBarItemDirective)
QueryList<NavBarItemDirective> navBarItems;

现在在 standard-layout 模板中，可以循环遍历项目并使用 ngTemplateOutlet

显示模板

        <nav class="nav1" #nav1>
            <div *ngFor="let item of navBarItems">
                <template [ngTemplateOutlet]="item.template"></template>    
            </div>
        </nav>

        <div class="content" #content>    
            <div *ngFor="let item of contentItems">
                <template [ngTemplateOutlet]="item.template"></template>    
            </div>
        </div>

        <nav class="nav2" #nav2>
            <div *ngFor="let item of actionBarItems">
                <template [ngTemplateOutlet]="item.template"></template>    
            </div>              
        </nav>

无法让 ng-content 的 select 正确过滤

Can't get ng-content's select to filter correctly

dart

angular-dart

angular