Angular2：@output装饰绑定错误

Question

我想使用@output装饰器从孩子输出值到父母，但它给我绑定错误。我不知道我的代码有什么问题。

未处理的承诺拒绝：模板解析错误： 无法绑定到'demo'，因为它不是'app-child'的已知属性。 1.如果'app-child'是一个Angular组件并且它有'demo'输入，那么请验证它是否是该模块的一部分。 2.如果'app-child'是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的'@ NgModule.schemas'中以禁止此消息。

请帮助我试过很多其他职位，但没有任何帮助我

// 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)" 

应该

(demo)="callChild($event)" 

[]是值绑定 ()是事件绑定