Angular2：ContentChildren + QueryList错误

Question

I want use @ContentChildren in Angular2 to navigate in a wizard. But when i use it, i have this error : "zone.js?fad3:158 Uncaught Error: Can't construct a query for the property "steps" of "ExtendedWizard" since the query selector wasn't defined."

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>

Thanks for your help

Answer 1

You need to move the class declaration export class ExtendedStep above it's first use, otherwise it will not be recognized. (only if you have several classes in the same file).

If you move

export class ExtendedStep {
    title: string;
}

just below the import s, it should work.