将html输入元素变量传递给共享组件

Question

你好，我有两个组件。组件1具有用于上传视频的输入元素。它有一个可变文件

<input
type="file"
accept=".mp4"
#file
/>

现在我有了Component2，它是一个共享组件：

<button (click)="file.click()">upload video</button>

现在我需要"；文件"；传递给共享组件以执行文件的变量。click((；

我不能接受共享组件中的输入元素

https://stackblitz.com/edit/angular-ivy-9wi6qs?file=src/app/component1/component1.component.html

Answer 1

这就像将值发送到组件中一样简单：

@Component({
selector: 'app-component1',
templateUrl: './component1.component.html',
styleUrls: ['./component1.component.css']
})
export class Component1Component implements OnInit {
constructor() { }

public fileAddress: string;
public fileChanged(event) {
// read the file when it changes and store it locally
if(event.target.files.length > 0) 
this.fileAddress = event.target.files[0].name;
}
}
ngOnInit() {
}
}

<!-- bind the event handler -->
<input type="file" accept=".mp4" (change)="fileChanged($event)" />
<!-- bind the local variable to an input on the child component -->
<app-upload-video [fileAddress]="fileAddress"></app-upload-video>

@Component({
selector: 'app-upload-video',
templateUrl: './upload-video.component.html',
styleUrls: ['./upload-video.component.css']
})
export class UploadVideoComponent implements OnInit {
//input variable to receive the value inside the component
@Input()
public fileAddress: string;
constructor() { }
ngOnInit() {
}
}