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

在DOM准备好的时候，我猜想你的uploadScript.js中的代码是初始化的，这是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 （单击）。 ElementRef 提供对html DOM元素的引用，该元素可用于模拟 input type =“file”上的实际点击事件

Angular2 Form在Index.html中有效，但在component.html中不起作用

1 个答案: