从组件外部关注组件内部的输入答案

【问题标题】：Focus on input inside a component from outside that component从组件外部关注组件内部的输入
【发布时间】：2019-01-24 21:21:23
【问题描述】：

场景如下，我有一个上传文件的组件，但是看起来真的很丑（经典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" />

那么有没有办法引用一个“封闭”在组件内的输入？

【问题讨论】：

标签： html css angular angular-components

【解决方案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 的元素不一定是链接

【讨论】：