html - 从组件外部关注组件内部的输入

Question

场景如下，我有一个上传文件的组件，但是它看起来真的很丑(经典的input type="file")，所以我想做一个风格化的标签(也许是一个图片或其他东西)，当你点击它时，你会得到与点击文件输入相同的行为。

我设法通过将我的 upload.component 模板放在我想使用的模板中来完成这项工作，但由于我需要在许多不同的地方上传文件，所以我不想这样做每次都必须复制代码。

这很好..

.image-upload > input
{
    display: none;
}

<div class="image-upload">
    <label for="file-input">
        <img src="placeholder.jpg"/>
    </label>

    <input id="file-input" type="file"/>
</div>

这不是..

<!-- my-other.component.html -->
<label for="file-input">
    <img src="placeholder.jpg"/>
</label>
<app-upload></app-upload>

<!-- upload.component.html -->
<input id="file-input" type="file" />

那么有没有一种方法可以引用“封闭”在组件内的输入？

Answer 1

有同样的问题，我做的是

CSS:

#file{
    position: absolute; 
    top: -100vh;
}

HTML:

<input type="file" id="file" name="file">
<a onclick="select_file()" id="file_button">File</a>

jQuery JS:

function select_file(){
    $('#file').click();
}

我认为你可以用 vanilla JS 来做，但我已经在我的元素中包含了 jQuery，所以无论如何......并且带有 onclick 的元素不一定是链接