Angular Dart 2 - querySelect 返回 null
Angular Dart 2 - querySelect returning null
我正在尝试设置一个拖放组件来上传多个文件。但是,当我尝试使用 querySelector
方法访问 DOM 上的元素时,我最终得到 null
.
我尝试实施 AfterViewInit
class 但无济于事。这是我当前的组件飞镖代码:
import 'dart:html';
import 'package:dnd/dnd.dart';
import 'package:angular/angular.dart';
@Component(
selector: 'upload',
templateUrl: 'upload.html',
styleUrls: [
'upload.css'
]
)
class Upload implements AfterViewInit {
@override
void ngAfterViewInit() {
// TODO: implement ngOnInit
Draggable d = new Draggable(document.querySelectorAll('.page'), avatarHandler : new AvatarHandler.clone());
var del = document.querySelector('.upload');
print(del); //prints null
Dropzone dropzone = new Dropzone(document.querySelector('.upload')); //throws an error, as it doesn't expect null.
dropzone.onDrop.listen((DropzoneEvent event){
print(event);
});
}
}
另外,我的upload.html文件如下:
<div class="center-me page" uk-grid>
<div class="uk-align-center text-align-center">
<h2 class="text-align-center" >Upload a file</h2>
<div class="upload uk-placeholder uk-text-center">
<span uk-icon="icon: cloud-upload"></span>
<span class="uk-text-middle">Attach binaries by dropping them here or</span>
<div uk-form-custom>
<input type="file" multiple>
<span class="uk-link">selecting one</span>
</div>
</div>
<progress id="progressbar" class="uk-progress" value="0" max="100" hidden></progress>
</div>
</div>
提前致谢。
所以这看起来应该可行。我实际上不建议这样做,因为它会通过上传 class 获取任何元素,如果您重用该组件,将会有很多元素。
我建议改用 ViewChild 语法
class Upload implements AfterViewInit {
@ViewChild('upload')
void uploadElm(HtmlElement elm) {
Dropzone dropzone = new Dropzone(elm);
dropzone.onDrop.listen((DropzoneEvent event){
print(event);
});
}
}
在模板中:
<div class="uk-placeholder uk-text-center" #upload>
那是说您不应该从 querySelect 中获取 null,但是从您显示的代码中我不确定为什么。
我正在尝试设置一个拖放组件来上传多个文件。但是,当我尝试使用 querySelector
方法访问 DOM 上的元素时,我最终得到 null
.
我尝试实施 AfterViewInit
class 但无济于事。这是我当前的组件飞镖代码:
import 'dart:html';
import 'package:dnd/dnd.dart';
import 'package:angular/angular.dart';
@Component(
selector: 'upload',
templateUrl: 'upload.html',
styleUrls: [
'upload.css'
]
)
class Upload implements AfterViewInit {
@override
void ngAfterViewInit() {
// TODO: implement ngOnInit
Draggable d = new Draggable(document.querySelectorAll('.page'), avatarHandler : new AvatarHandler.clone());
var del = document.querySelector('.upload');
print(del); //prints null
Dropzone dropzone = new Dropzone(document.querySelector('.upload')); //throws an error, as it doesn't expect null.
dropzone.onDrop.listen((DropzoneEvent event){
print(event);
});
}
}
另外,我的upload.html文件如下:
<div class="center-me page" uk-grid>
<div class="uk-align-center text-align-center">
<h2 class="text-align-center" >Upload a file</h2>
<div class="upload uk-placeholder uk-text-center">
<span uk-icon="icon: cloud-upload"></span>
<span class="uk-text-middle">Attach binaries by dropping them here or</span>
<div uk-form-custom>
<input type="file" multiple>
<span class="uk-link">selecting one</span>
</div>
</div>
<progress id="progressbar" class="uk-progress" value="0" max="100" hidden></progress>
</div>
</div>
提前致谢。
所以这看起来应该可行。我实际上不建议这样做,因为它会通过上传 class 获取任何元素,如果您重用该组件,将会有很多元素。
我建议改用 ViewChild 语法
class Upload implements AfterViewInit {
@ViewChild('upload')
void uploadElm(HtmlElement elm) {
Dropzone dropzone = new Dropzone(elm);
dropzone.onDrop.listen((DropzoneEvent event){
print(event);
});
}
}
在模板中:
<div class="uk-placeholder uk-text-center" #upload>
那是说您不应该从 querySelect 中获取 null,但是从您显示的代码中我不确定为什么。