Angular2 Form 在 Index.html 中有效，但在 component.html 中无效

Question

为什么这个上传文件表单示例在Index.html 中有效，而在任何component.html 文件中都无效？

如果我将它移动到任何 component.html 单击添加文件甚至不会打开浏览对话框。

  <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
        <div id="drop">
                <a>Add File</a> Drag and Drop
                <input type="file" name="upl" />
        </div>

        <ul id="uploadList"></ul>
  </form>

---

编辑：我必须提一下，我只在Index.html 中导入js 文件，我也没有在System.js 或angular-cli.build.js 中导入

在 Index.html 中的引用之一是：

<script src="assets/js/uploadScript.js"></script>

这是来自uploadScript.js 的代码，应该会打开浏览器对话框：

$('#drop a').click(function(){
    $(this).parent().find('input').click();
});

Answer 1

您在uploadScript.js 中的代码（我猜）是在DOM 准备好时初始化的，这就是JQuery 初始化的基本工作方式。但是由于你的组件还没有在 DOM 中，所以什么也找不到。

您需要将初始化代码直接放入您的组件中，以便在正确的时间调用它，当表单实际在 DOM 中呈现时。

尝试像这样改变你的组件：

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

// reference to jQuery
declare var $: any;

@Component({
    selector: 'my-component',
    template: `

<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
    <div id="drop">
        <a (click)="addFile()">Add File</a> Drag and Drop
        <input type="file" name="upl" />
    </div>

    <ul id="uploadList"></ul>
</form>

`
})
export class JQueryComponent
{
    // get the ElementRef
    constructor(private _elRef: ElementRef)
    {
    }

    public addFile(): void
    {
        $(this._elRef.nativeElement).find('#drop a').parent().find('input').click();
    }
}

重要的部分是使用 Angular 2 (click) 直接绑定到 Add File 锚点。 ElementRef 提供对您的 html DOM 元素的引用，可用于模拟 input type="file"

上的实际点击事件