Question

我对角度6中的父母/孩子交流有疑问，代码正常工作。但是我在业力上出现错误。请参阅以下内容：

Failed: Template parse errors:
Can't bind to 'choices' since it isn't a known property of 'app-display-show-choices'.
1. If 'app-display-show-choices' is an Angular component and it has 'choices' input, then verify that it is part of this module.
2. If 'app-display-show-choices' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
    <div *ngSwitchCase="'menu'">
      <app-display-show-choices      
       [ERROR ->][choices]="displayView.choices"
       (nextView)="onNextView($event)"
       >
"): ng:///DynamicTestModule/DisplayViewComponent.html@5:7
'app-display-show-choices' is not a known element:
1. If 'app-display-show-choices' is an Angular component, then verify that it is part of this module.
2. If 'app-display-show-choices' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  <div [ngSwitch]="displayView.type" >
    <div *ngSwitchCase="'menu'">
      [ERROR ->]<app-display-show-choices      
       [choices]="displayView.choices"
       (nextView)="onNextView("): ng:///DynamicTestModule/DisplayViewComponent.html@4:6
Can't bind to 'choices' since it isn't a known property of 'app-display-show-choices'.
1. If 'app-display-show-choices' is an Angular component and it has 'choices' input, then verify that it is part of this module.
2. If 'app-display-show-choices' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
      <div *ngSwitchCase="'choice'">
          <app-display-show-choices         
           [ERROR ->][choices]="displayView.choices"
           (nextView)="onNextView($event)"
           >
"): ng:///DynamicTestModule/DisplayViewComponent.html@12:11
'app-display-show-choices' is not a known element:
1. If 'app-display-show-choices' is an Angular component, then verify that it is part of this module.
2. If 'app-display-show-choices' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      </div>
      <div *ngSwitchCase="'choice'">
          [ERROR ->]<app-display-show-choices         
           [choices]="displayView.choices"
           (nextView)=""): ng:///DynamicTestModule/DisplayViewComponent.html@11:10

父组件：

import { Component, Input, OnInit, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { DisplayView } from '../../model/display-view.model';
import { Choice } from '../../model/choice.model';

@Component({
  selector: 'app-display-view',
  templateUrl: './display-view.component.html',
  styleUrls: ['./display-view.component.css']
})
export class DisplayViewComponent implements OnChanges, OnInit {

  @Input() displayView: DisplayView;
  choices: [Choice];
  @Output() nextView = new EventEmitter<number>();


  @Input() currentView: number;
  hidden: boolean;

  constructor() {
    this.hidden = false;
  }

  ngOnInit() {
    this.hidden = !this.displayView.isFirst;
  }

  ngOnChanges(changes: SimpleChanges): void {
    if ( this.currentView !== this.displayView.id) {
      this.hidden = true;
    } else {
      this.hidden = false;
    }
  }

  onNextView(nextView: number) {
    if ( nextView !== this.displayView.id) {
      this.hidden = true;
    } else {
      this.hidden = false;
    }
    this.nextView.emit(nextView);
  }

}

父html：

<div [hidden]="hidden">
  <h1>{{displayView.title}}</h1>
  <div [ngSwitch]="displayView.type" >
    <div *ngSwitchCase="'menu'">
      <app-display-show-choices      
       [choices]="displayView.choices"
       (nextView)="onNextView($event)"
       >
      </app-display-show-choices>
      </div>
      <div *ngSwitchCase="'choice'">
          <app-display-show-choices         
           [choices]="displayView.choices"
           (nextView)="onNextView($event)"
           >
          </app-display-show-choices>
    </div>
</div>

子组件：

import { Component, Input, OnInit, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { Choice } from '../../model/choice.model';

@Component({
  selector: 'app-display-show-choices',
  templateUrl: './display-show-choices.component.html',
  styleUrls: ['./display-show-choices.component.css']
})
export class DisplayShowChoicesComponent implements OnInit {
  @Input() choices: [Choice];
  @Output() nextView = new EventEmitter<number>();
  clicked: number;

  constructor() {  }

  ngOnInit() {
  }

  onClick(choice: Choice) {
    this.clicked = choice.value;
    this.nextView.emit(choice.nextQuestion);
  }

}

App.module.ts：



import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';


import { AppComponent } from './app.component';
import { DisplayMainComponent } from './display/component/display-main/display-main.component';
import { DisplayShowChoicesComponent } from './display/component/display-show-choices/display-show-choices.component';
import { TerminalUserLogonComponent } from './display/component/terminal-user-logon/terminal-user-logon.component';
import { DisplayViewComponent } from './display/component/display-view/display-view.component';



@NgModule({
  declarations: [
    AppComponent,
    DisplayMainComponent,
    DisplayShowChoicesComponent,
    TerminalUserLogonComponent,
    DisplayViewComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; import { DisplayMainComponent } from './display/component/display-main/display-main.component'; import { DisplayShowChoicesComponent } from './display/component/display-show-choices/display-show-choices.component'; import { TerminalUserLogonComponent } from './display/component/terminal-user-logon/terminal-user-logon.component'; import { DisplayViewComponent } from './display/component/display-view/display-view.component'; @NgModule({ declarations: [ AppComponent, DisplayMainComponent, DisplayShowChoicesComponent, TerminalUserLogonComponent, DisplayViewComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

display-view.model.ts：

import { Choice } from './choice.model';


export class DisplayView {
    id: number;
    title: string;
    type: string;
    public isFirst: boolean;
    public choices: Choice[];

    constructor(values: Object = {}) {
        Object.assign(this, values);
      }
}

由于我只是从angular开始，所以这可能是很愚蠢的。在项目中，我还有其他的oke组合。请帮助我我做错了什么？

Answer 1

您需要确保DisplayShowChoicesComponent在提供您的declaration的相应.modules文件的DisplayViewComponent部分中。

基本HomeComponent的示例是：

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})

接下来需要担心的是输入@Input() choices: [Choice];。我不知道这种语法。你可以尝试

@Input() choices: Choice[];

代替？与DisplayViewComponent的{{1}}相同，请尝试choices: [Choice];。

Answer 2

我已找到导致此错误的问题。第一个父组件的规范文件缺少HttpClientModule和BrowserModule导入。通过添加这些，它解决了错误。但是，我仍然不明白为什么在主父组件测试规范文件中缺少这些组件会导致这种错误。

角度6

2 个答案: