Question

我正在尝试使用@output装饰器从子输出值到父级，但它给了我绑定错误。我不知道我的代码有什么问题。

未处理的承诺拒绝：模板解析错误：无法绑定到＆＃39; demo＆＃39;因为它不是app-child＆＃39;的已知属性。 1.如果是app-child＆＃39;是一个Angular组件，它有＆＃39; demo＆＃39;输入，然后验证它是否是该模块的一部分。 2.如果＆＃39; app-child＆＃39;是一个Web组件，然后添加＆＃34; CUSTOM_ELEMENTS_SCHEMA＆＃34;到了＆＃39; @ NgModule.schemas＆＃39;该组件可以禁止此消息。

请帮助我尝试了很多其他帖子，但没有任何帮助我

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

[]用于值绑定 ()用于事件绑定

Angular2：@output Decorator绑定错误

1 个答案: