我有像下面这样的组件的angular2表单模板

<div>

  <div>
    <label> Masukkan nik </label>
    <input type="text"placeholder="Username" aria-describedby="basic-addon1" #name>
  </div>
     <button (click)="verifyNik(name.value)">Verify</button>

</div> <!-- /container -->

如果我单击验证按钮然后获取名称输入的值并传递给我的组件中的函数,我想做什么,如下所示

verifyNik(nik){
    if(this.idparam==nik.substring(1,4)){
      console.log("true");
    }
  }

所以如果模板中的输入名称(和它的子串)的值等于我的id.param(我从角度路径中的subsribe id得到),那么控制台日志将为true.但问题是什么都没有出来.如何解决这个问题

如果你想知道我是如何得到我的id.param.这是mycode

private idchild:any;
  f: FormGroup;
  private idparam:any;


  constructor(
    private fb: FormBuilder,private servicedev:DevService,private complaintservice:ComplaintService,private router: ActivatedRoute
  ) { }



     ngOnInit() {
        this.idchild = this.router.params.subscribe(params => {

           let id = params['id'];
           this.idparam=id;

          // Retrieve Pet with Id route param

       });

<div>
  <label> Masukkan nik </label>
  <input type="text"placeholder="Username" 
   aria-describedby="basic-addon1" #name>
</div>
<button (click)="verifyNik(name)">Verify</button>

然后在你的.ts

verifyNik(nik) {
  if(this.idparam == nik.value.substring(1,4)) {
    console.log("true");
  }
}

以下内容摘自ng-book 2

@Component({
  selector: 'products-list',directives: [ProductRow],inputs: ['productList'],outputs: ['onProductSelected'],template: `
  <div>
    <product-row 
      *ngFor="let myProduct of productList" 
      [product]="myProduct" 
      (click)='clicked(myProduct)'
      [class.selected]="isSelected(myProduct)">
    </product-row>
  </div>
  `
})
class ProductsList {
  /**
   * @input productList - the Product[] passed to us
   */
  productList: Product[];

  /**
   * @ouput onProductSelected - outputs the current 
   *          Product whenever a new Product is selected
   */
  onProductSelected: EventEmitter<Product>;

  /**
   * @property currentProduct - local state containing 
   *             the currently selected `Product`
   */
  currentProduct: Product;

  constructor() {
    this.onProductSelected = new EventEmitter();
  }

  clicked(product: Product): void {
    this.currentProduct = product;
    this.onProductSelected.emit(product);
  }

  isSelected(product: Product): boolean {
    if (!product || !this.currentProduct) {
      return false;
    }
    return product.sku === this.currentProduct.sku;
  }

}

@Component({
  selector: 'product-row',inputs: ['product'],... not relevant to the question
  `
})
class ProductRow {
  product: Product;
}

两个问题,

Q1.在哪里说

(click)='clicked(myProduct)'

是否与ProductRow组件上的产品属性相同的参数？我习惯将$event传递给clicked.为什么要传递“myProduct”呢？

Q2.在哪里说

[class.selected]="isSelected(myProduct)"

好像我们正在做

[class.selected]="false"

对于所有产品,因为最初没有选择它们.
角度如何能够一次又一次地调用isSelected(myProduct)？角度如何决定何时调用isSelected？

这是angular2中父子通信的一个例子.

当您使用(click)=’clicked(myProduct)’事件时,您正在做的是使用@ouput onProductSelected属性发出所选产品的值,如下所示：

this.onProductSelected.emit(product);
$event` here would be equivalent to `#myProduct.value

当任何事件被执行时,angular2的变化检测开始;检查所有模板表达式值.然后它根据值更改更新属性绑定.现在每次myProduct的值发生变化时,属性绑定[class.selected]需要更新,因此调用了isSelected方法.

可以将id从模板传递给函数(AngulasJS2).

template: `
  <div*ngFor="#mov of movs">
  ..//
  <buttontype="button"
  ..//
  (click)="test(id)" [id]="mov"
  > 
  ..//

  ..//
  test(id: string) {
  //test
  var logo1: HTMLElement = document.getElementById(id);
  ..//
  }

现在我正在使用它,它的工作原理,

(click)="test(''+mov)" [id]="mov"

但是这个代码不起作用.

(click)="test(id)" [id]="mov"

对不起我的英语

当您添加模板变量(如#elem)时(在本机DOM元素上,而不是Angular组件或带有指令的元素),您可以将其用作元素的引用,然后从元素中获取id(elem.id) .

<div*ngFor="let mov of movs" >
  ..//
  <buttontype="button" #elem
  ..//
    (click)="test(elem.id)" [id]="mov"

我正在尝试捕获Angular组件中的鼠标坐标.

这是有问题的html：

<div id="container"(click)="onClick(ev)"></div>

这是相应的typescript文件中的组件函数：

onClick( ev : MouseEvent ) {
  console.log("x:" + ev.clientX);
}

和控制台中的错误：

Cannot read property 'clientX' of undefined'

将MouseEvent传递给组件函数的正确方法是什么？

您应该使用$event将MouseEvent对象传递给您的单击处理程序.

所以简单地写：

(click)="onClick($event)"

也可以看看

> https://angular.io/guide/template-syntax#event-and-event-handling-statements