Question

我试图在子组件内的表单上单击一个按钮。我也尝试过使用ViewChild和ViewChildren，将模板ref引用为ElementRef。全部返回值，而不返回本地元素。 stackblitz-demo

import {
  Component,
  ViewChild,
  AfterViewInit,
  ElementRef
} from '@angular/core';
import {
  HelloComponent
} from './hello.component';

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

  @ViewChild('test') form: ElementRef;
  name = 'Angular';

  ngAfterViewInit() {
    console.log(this.form);
  }
}



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

@Component({
  selector: 'hello',
  template: `
  Child Component
    <form class="login-as-user" [action]="formUrl" method="post" target="_blank">
      <input id="login-as-user" type="submit" value="reference this button">
    </form>
`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent {
  @Input() name: string;
}

Answer 1

您可以在子组件中添加一个功能，该功能实际上是通过使用所需按钮的ViewChild然后访问nativeElement.click()来以编程方式单击其自己的按钮。

然后从父组件触发该功能，并为子组件触发另一个ViewChild

孩子：

模板：<input id="login-as-user #buttomToBeClicked>
TS：@ViewChild('buttonToBeClicked') buttonToBeClicked: ElementRef;

然后添加点击功能：

clickButton(){
  this.buttonToBeClicked.nativeElement.click();
}

父母：

模板：<hello #child></hello>
TS：@ViewChild('child') child;

然后按如下所示在父组件中调用click函数：

this.child.clickButton();

修改：

您可以将this.child.buttonToBeClicked.nativeElement.click();用作快捷方式，但是通过一种额外的方法进行通信可以使您更加灵活地在子组件中添加任何支票

Answer 2

您需要的是： @ViewChild('test', {read: ElementRef}) form: ElementRef;

有关更多信息，请阅读以下文章：

Angular @ViewChild: How to read multiple tokens

以编程方式单击子组件形式的按钮

2 个答案: