Question

TL; DR： 如果不使用nativeElement.click，我如何在这种情况下触发<input file=type>？换句话说，更好地符合Renderer2

对于这个用例，在angular4 +组件类中使用dom元素对象的想法并不清楚。这适用于当前的浏览器。

具体来说， this.picInput.nativeElement.click（）; 但据我所知不推荐（直接使用元素方法，即。nativeElement.click（））。因为它不适用于其他平台。

app.component.html

<!-- button element not hidden -->
<div fxFlex="10" style="text-align: center;">
  <a md-raised-button (click)="clickTheInput()">Add Pic</a>
</div>

<!-- input element hidden on the page --> 
<div class="row2ofheader">
  <div fxFlex="10" style="text-align: center;">

    <input #picInput type="file" (change)="alert('changed in input')">

    </div>
  </div>

app.component.ts

export class AppComponent implements OnInit, AfterViewInit {

    @ViewChild('picInput') picInput;

    constructor(private _auth: AuthService, private renderer: Renderer2) { }

    ngAfterViewInit(): void {}

    alert(input) {
    window.alert(input);
    }

    clickTheInput() {
    this.picInput.nativeElement.click();
    }

Answer 1

来自docs：

模板引用变量通常是对DOM元素的引用在模板中。 ....您可以参考模板参考变量在模板中的任何位置。

因此#picInput为您提供<input>标记作为DOM元素属性和模板中的方法的引用。

您可能还需要考虑这个：

  .....
  <a md-raised-button (click)="picInput.click()">Add Pic</a>

  .....
  <input #picInput type="file" (change)="alert('changed in input')">

<小时/> UPDATE

还有另一种方法可以确保它无处不在。从按钮和输入中调用相同的方法：

<强> HTML：

  .....
  <a md-raised-button (click)="onChange()">Add Pic</a>

  .....
  <input #picInput type="file" (change)="onChange()">

<强>打字稿：

onChange(){
  console.log("input changed")
}

如果你需要检测哪一个触发onChange（），则传递一个参数：

  <input #picInput type="file" (change)="onChange($event, 'input')">

或者如果你需要做一些事情但又不同于另一个：

  <input #picInput type="file" (change)="onChange(): somethingElse()">

AngularI / O＆amp;渲染器2：通过单击单独的按钮元素触发<input type =“file”/> elmt上的单击事件

1 个答案: