无法构造属性的查询，因为未定义查询选择器

Question

目前在 Angular 2 中存在其他组件的组件时遇到此问题。"主"组件的组件可以在层次结构中多次存在。

但是我收到此错误："无法为"SidenavLinkComponent"的属性"navComponent"构造查询，因为未定义查询选择器">

SidenavLinkComponent:
@ContentChild(SidenavNavComponent) navComponent: SidenavNavComponent;
SidenavNavComponent:
@ContentChildren(SidenavLinkComponent) linkComponents: QueryList<SidenavLinkComponent>;

我做了这个苗条的 plunker，其中显示了问题：普伦克

我不知道为什么会这样。

Answer 1

这是因为SidenavComponent和SidenavNavComponent之间的循环依赖关系。可以使用 forwardRef 解析它。不要忘记导入它：

import { forwardRef } from '@angular/core';

@ViewChild(forwardRef(() => SidenavNavComponent))
private navComponent: SidenavNavComponent;

普伦克示例

Answer 2

在

规范文件中使用枚举时，我遇到了此错误。

app.component.ts

@Component({
  selector: 'mintplayer-ng-bootstrap-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'ng-bootstrap-demo';
  colors = Color; // Comment out this line to make the unit tests succeed
}

app.component.spec.ts

describe('AppComponent', () => {
  let fixture: ComponentFixture<AppComponent>;
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        // Component to test
        AppComponent,
      ],
      imports: [
        RouterTestingModule
      ],
      // providers: [
      //   { provide: Color }
      // ]
    }).compileComponents();
  });
  it('should create the app', () => {
    fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const app = fixture.componentInstance;
    expect(app).toBeTruthy();
  });
});
enum Color {
  primary,
  secondary,
  success,
  danger,
  warning,
  info,
  light,
  dark,
  body,
  white,
  transparent
}

还不知道如何解决它，但我认为指出可能会很有趣，因为错误消息完全关闭了......