角度6中的親子溝通問題

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 { } 

顯示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開始，所以這可能是非常愚蠢的。在項目中，我還有其他可以使用的父子組合。 請幫助我我做錯了什么？

Answer 1

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

基本HomeComponent的示例是：

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

接下來需要擔心的是輸入@Input() choices: [Choice]; 。 我不知道這種語法。 你能試一下嗎

@Input() choices: Choice[];

代替？ 與上面在DisplayViewComponent的choices: [Choice]; -嘗試choices: Choice[]; 代替。

Answer 2

我發現了導致此錯誤的問題。 第一個父組件的規范文件缺少HttpClientModule和BrowserModule導入。 通過添加這些，它解決了錯誤。 但是，我仍然不明白為什么在主父組件測試規范文件中缺少這些組件會導致這種錯誤。