Question

我正在尝试运行This URL

中提供的示例

根据网址，我应该创建2个组件

VoteTakerComponent（Parent - app.vote-taker.component.ts）
VoterComponent（Child - app.voter.component.ts）

并引导父组件。我已为我在下面使用的所有3个主要文件添加了代码

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';
import { VoteTakerComponent } from './app.vote-taker.component';
import { VoterComponent } from './app.voter.component';

@NgModule({
  declarations: [ VoteTakerComponent ],
  bootstrap:    [ VoteTakerComponent ]
})
export class AppModule { }

app.vote-taker.component.ts

import { NgModule }      from '@angular/core';
import { Component }      from '@angular/core';
import { VoterComponent } from './app.voter.component';

@Component({
  selector: 'vote-taker',
  template: `
    <h2>Should mankind colonize the Universe?</h2>
    <h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
    <voter *ngFor="let voter of voters"
      (onVoted)="onVoted($event)">
    </voter>
  `
})

//[name]="voter"

export class VoteTakerComponent {
  agreed = 0;
  disagreed = 0;
  voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
  onVoted(agreed: boolean) {
    agreed ? this.agreed++ : this.disagreed++;
  }
}

app.voter.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Directive } from '@angular/core';

@Component({
  selector: 'voter',
  template: `
    <h4>{{name}}</h4>
    <button (click)="vote(true)"  [disabled]="voted">Agree</button>
    <button (click)="vote(false)" [disabled]="voted">Disagree</button>
  `
})

export class VoterComponent {
  @Input()  name: string;
  @Output() onVoted = new EventEmitter<boolean>();
  voted = false;
  vote(agreed: boolean) {
    this.onVoted.emit(agreed);
    this.voted = true;
  }
}

执行此代码时，我在浏览器控制台中收到以下错误

未处理承诺拒绝：模板解析错误：＆＃39;选民＆＃39;不是一个已知元素： 1.如果选民＆＃39;是一个Angular组件，然后验证它是否是此模块的一部分。 2.如果选民＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;此组件禁止此消息。（＆＃34;人类是否在宇宙中殖民？

当我在网上搜索此类错误时，有人提到我应该在 app.modules.ts 文件中的NgModules的声明部分中包含 VoterComponent ，但是当我添加 VoterComponent 时在声明标签中如下所示

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';
import { VoteTakerComponent } from './app.vote-taker.component';
import { VoterComponent } from './app.voter.component';

@NgModule({
  declarations: [ VoteTakerComponent, VoterComponent ],
  bootstrap:    [ VoteTakerComponent ]
})

export class AppModule { }

但我得到以下错误

选择者＆＃34;投票者＆＃34;与任何元素都不匹配

我做错了什么？

Answer 1

当您将Toast.makeText(this, description, Toast.LENGTH_LONG).show();作为引导程序组件时，必须使用VoteTakerComponent页面vote-taker页面上的index.html选择器（应用程序的根目录）才能使应用程序正常工作。

<vote-taker>App is loading..</vote-taker>

Angular 2 - 问题＆＃34;父母听取儿童事件＆＃34; angular.io

1 个答案: