Angular 2 - Ausgabe mit "Parent lauscht Kind Ereignis" in angular.io

Question

gegebene Probe in This URL

Basierend auf der URL bereitgestellt Ich versuche, eine Probe zu laufen, i 2 Komponenten

schaffen sollte
• VoteTakerComponent (Parent - app.vote-taker.component.ts)
• VoterComponent (Child - app.voter.component.ts)

und die übergeordnete Komponente Bootstrap. Ich habe für alle drei großen Dateien hinzugefügt Code i unten

verwendet haben 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; 
    } 
} 

Ich erhalte die in Browser-Konsole folgende Fehlermeldung, wenn ich diesen Code ausgeführt

Unhandle Versprechen Ablehnung: Template Parse-Fehler: ‚Wähler‘ ist kein bekanntes Element: 1. Wenn ‚Wähler‘ eine Angular Komponente, dann vergewissern Sie sich, dass es Teil dieses Moduls ist. 2. Wenn 'voter' eine Web-Komponente ist, fügen Sie 'CUSTOM_ELEMENTS_SCHEMA' den '@ NgModule.schemas' dieser Komponente hinzu, um diese Nachricht zu unterdrücken. ("ULD Menschheit besiedeln das Universum?

Wenn sie Web für diese Art von Fehlern gesucht, seine erwähnt, dass i VoterComponent im Deklarationsteil von NgModules in app.modules.ts umfassen sollte Datei, aber wenn ich hinzufügen VoterComponent in Erklärungen Tag als wie unten

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

aber ich bekomme folgende Fehler

Der Wähler "vote-Nehmer" alle Elemente

nicht übereinstimmten Was mache ich falsch?

Answer 1

Wie Sie VoteTakerComponent als Bootstrap-Komponente gemacht, haben Sie vote-taker Selektor (Wurzel Ihrer Anwendung) auf Seite index.html Seite make Anwendung Arbeit zu verwenden.

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