角度组件的参数函数

Question

怎么说我的angular2组件可以接收一个函数作为参数呢？

未捕获的错误：模板解析错误：无法绑定到“点击”，因为它 不是“输入”的已知属性。 (" minlength="{{minlength}}"

[错误 ->]click="{{click}}"

"): ng:///AppModule/InputTextComponent.html@12:2

组件输入.ts

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

@Component({
  selector: 'app-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class InputTextComponent implements OnInit {

  @Input() id: string;
  @Input() name: string;

  @Output() click = new EventEmitter();  

  constructor() { }

  ngOnInit() {
  }

}

模板输入组件：

    <input 
  type="text" 
  id="{{id}}" 
  name="{{name}}" 
  click="{{click}}"
  >

组件.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  clique() {
    console.log('Clicando...')
  }
}

Componente.html

<app-input-text 
      id="2" 
      name="nome" 
      (click)="clique(event)"
      ngDefaultControl>

    </app-input-text>

Answer 1

你不能。

我们以ngModel为例：当你写

[(ngModel)]="x"

您实际上有 3 个不同的案例：

• ngModel 是一个内置的指令属性，如果使用“裸”你发送一个字符串到标签
• [ngModel] 是一个 Input，意思是你向标签发送数据
• (ngModel) 是一个输出，表示标签正在向您发送数据

在您的情况下发生的情况是您想要向输入发送字符串，但输入未配置为接受输入。

但是，输入被配置为接受事件输出，例如点击。为了让它工作，你必须这样写

<input (click)="clique()">

我希望它足够清楚，如果没有，请随时询问！

EDIT你也可以这样写你的输入

<input [id]="id" [name]="name" (click)="clique($event)">