Angular 2 : ContentChildren+QueryList error

Question

我想在 Angular2 中使用 @ContentChildren 在向导中导航。但是当我使用它时，出现了这个错误:“zone.js?fad3:158 未捕获错误:由于未定义查询选择器，无法为“ExtendedWizard”的属性“steps”构建查询。”

wizard.component.ts

import { Component, ContentChildren, QueryList } from '@angular/core';

@Component({
    selector: 'extended-wizard',
    template: `
            <ul>
                <li *ngFor="let step of steps">
                    {{step.title}}
                </li>
            </ul>
            <ng-content></ng-content>
    `
})
export class ExtendedWizard {
    @ContentChildren(ExtendedStep) steps: QueryList<ExtendedStep>;
}

@Component({
    selector: 'extended-step',
    template: `
        <fieldset>
            {{title}}
            <ng-content></ng-content>
        </fieldset>
    `
})
export class ExtendedStep {
    title: string;
}

app.component.html

<extended-wizard>
    <extended-step title="Step 1"></extended-step>
    <extended-step title="Step 2"></extended-step>
</extended-wizard>

谢谢你的帮助

Answer 1

需要将类声明export class ExtendedStep移到首次使用的上方，否则将无法识别。 (仅当您在同一个文件中有多个类时)。

如果你移动

export class ExtendedStep {
    title: string;
}

就在 import 的下面，它应该可以工作。