Angular2 : @output Decorator bind 오류

Question

@output 데코레이터를 사용하여 자식에서 부모로 값을 출력하려고하지만 바인딩 오류가 발생합니다. 나는 내 코드에 무슨 문제가 있는지 모른다.

처리되지 않은 약속 거부 : 템플릿 구문 분석 오류 : 'app-child'의 알려진 속성이 아니기 때문에 '데모'에 바인딩 할 수 없습니다. 1. 'app-child'가 Angular 구성 요소이고 'demo'입력이 있으면이 모듈의 일부인지 확인하십시오. 2. 'app-child'가 웹 구성 요소 인 경우이 구성 요소의 '@ NgModule.schemas'에 "CUSTOM_ELEMENTS_SCHEMA"를 추가하여이 메시지를 표시하지 않습니다.

내가 다른 많은 게시물을 시도했지만 아무것도 나에게

// Child component 

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

@Component({ 
    selector: 'app-child', 
    templateUrl: './child.component.html', 
    styleUrls: ['./child.component.css'] 
}) 
export class ChildComponent implements OnInit { 
@Input() usernameModel: string; 
@Output() demo = new EventEmitter(); 
    constructor() { } 

    ngOnInit() { 
    } 

    eventEmit(){ 
    this.demo.emit('message'); 
    } 

} 

을

// parent component 

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { LoginService } from '../login.service'; 
import { ChildComponent } from '../child/child.component'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'], 
    providers: [LoginService] 
}) 
export class LoginComponent implements OnInit { 
usernameModel: string; 
passwordModel: string; 
validLogin: Boolean; 
loginData: any; 
loginDataLength: number; 
msg: string; 
    constructor(private router: Router, private loginService: LoginService) { 
    console.log('constructor'); 
    } 

    ngOnInit(){ 
    console.log('on init'); 
    this.loginService.getLoginData() 
     .subscribe(data => { 
     this.loginData = data; 
     this.loginDataLength = data.length; 
     }); 


    } 

    callChild(event){ 
    this.msg = event; 
    } 

    homeNav(){ 


    if(this.usernameModel === 'jay' && this.passwordModel === 'Jay'){ 
     this.validLogin = true; 
     this.router.navigate(['/home']); 
    } 
    else{ 
     this.validLogin = false; 
    } 

    } 
} 

<!-- Parent template --> 

<div id="loginBox"> 
    <div class="alert alert-danger" *ngIf="validLogin === false"> 
     <strong>Alert!</strong> Wrong Username/Password. 
    </div> 
    <form class="form-group" #loginForm="ngForm"> 
     <div class="input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
      <input type="text" class="form-control" placeholder="Username" [(ngModel)]="usernameModel" name="username" #username="ngModel" required /> 
      <span class="input-group-addon errorBox" *ngIf="username.errors && (username.dirty || username.touched)"> 
       <i class="glyphicon glyphicon-exclamation-sign" [hidden]="!username.errors.required"></i> 
      </span> 
     </div> 
     <div class="input-group"> 
      <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> 
      <input type="password" class="form-control" placeholder="Password" [(ngModel)]="passwordModel" name="password" #password="ngModel" required /> 
      <span class="input-group-addon errorBox" *ngIf="password.errors && (password.dirty || password.touched)"> 
       <i class="glyphicon glyphicon-exclamation-sign" [hidden]="!password.errors.required"></i> 
      </span> 
     </div> 
     <button class="btn btn-primary btn-block" [disabled]="!loginForm.valid" (click)="homeNav()" >Login</button> 
    </form> 
</div> 
{{msg}} 
<app-child [usernameModel]="usernameModel" [demo]="callChild($event)"></app-child> 

<!-- child template --> 

<p> 
    child works! {{usernameModel}} 
</p> 

Answer 1

도움이되지 도와주세요

는해야

(demo)="callChild($event)" 

[]이 ()이