Angular2：ContentChildren + QueryList错误

Question

我想在Angular2中使用@ContentChildren在向导中导航。 但是，当我使用它，我有这个错误：“zone.js？fad3：158未捕获的错误：由于查询选择器未定义，无法为”ExtendedWizard“的属性”步骤“构造查询。

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 S，它应该工作。