AngularDart:文件输入模型指令

AngularDart:文件输入模型指令,dart,angular-dart,Dart,Angular Dart,我正试图制作一个类似于ng模型的指令来处理文件输入。我对AngularDart是新手,所以我真的不知道该怎么做 下面是我通过查看ng模型源文件设法编写的一些代码,但它(显然)不起作用 @Decorator( 选择器:“输入[类型=文件][文件模型]”, 映射:常量{'file-model':'&fileselected'}) 类文件模型{ 最终输入元素输入元素; 字符串表达式; 最终范围; 字符串输入类型; 列出文件; 选择变量; 文件模型(this.inputElement、this.scop

我正试图制作一个类似于ng模型的指令来处理文件输入。我对AngularDart是新手,所以我真的不知道该怎么做

下面是我通过查看ng模型源文件设法编写的一些代码,但它(显然)不起作用

@Decorator(
选择器:“输入[类型=文件][文件模型]”,
映射:常量{'file-model':'&fileselected'})
类文件模型{
最终输入元素输入元素;
字符串表达式;
最终范围;
字符串输入类型;
列出文件;
选择变量;
文件模型(this.inputElement、this.scope、NodeAttrs attrs){
expression=attrs[“文件模型”];
inputElement.onChange.listen((事件){
files=inputElement.files;
所选文件(文件);
});
}
}
有什么建议吗?

我已经准备好了

@Decorator(
选择器:“输入[类型=文件][文件模型]”,
映射:常量{'file-model':'&fileselected'})
类文件模型{
元素输入元素;
字符串表达式;
最终范围;
字符串输入类型;
列出文件;
var侦听器={};
文件模型(this.inputElement,this.scope){
}
initListener(变量流,变量处理程序){
int key=stream.hashCode;
if(!listeners.containsKey(键)){
侦听器[键]=处理程序;
listen((事件)=>handler({r“files”:(inputElement作为inputElement.files}));
}
}
设置FileSelected(值)=>initListener(inputElement.onChange,值);
}
用法:

要在更改事件发生时获取文件,您也可以通过
$event.target.files
传递它们。例如:

import 'package:angular2/core.dart';

@Component(
    selector: 'my-app', 
    template: r'''
        <h1>{{title}}</h1>
        <input class="btn" type="file" (change)="onFileUpload($event.target.files)">
    ''')
class AppComponent {
    String title = 'File transfer';

    onFileUpload(List<File> files) {
        if (files == null) return;
        // read file content as dataURL
        final File file = files[0];
        final FileReader reader = new FileReader();
        reader.onLoad.listen((_) {
            print(reader.result);
        });
        reader.readAsDataUrl(file);
    }
}
import'包:angular2/core.dart';
@组成部分(
选择器:“我的应用程序”,
模板:r''
{{title}}
''')
类AppComponent{
字符串标题='文件传输';
onFileUpload(列出文件){
如果(files==null)返回;
//将文件内容读取为dataURL
最终文件=文件[0];
最终文件读取器=新文件读取器();
reader.onLoad.listen((){
打印(reader.result);
});
reader.readAsDataUrl(文件);
}
}

有人试图实现这一点(仅限讨论)什么不起作用?您是否收到一些错误消息,或者您根本没有应用装饰程序?当我看它的时候,它看起来有点不同。是的,它看起来确实有点不同。这就是为什么我花了很长时间去理解它,以编写我所做的代码。但我不知道如何继续。如何提醒回调函数,例如file model=“cmp.filesAdded(files)”或更新变量,例如file model=“cmp.files”。我个人认为回调更好,但不知道如何实现。代码中的“expression”变量将回调函数作为字符串保存,但我不知道如何计算它。