Question

我正在尝试设置一个拖放组件以上传多个文件。但是，当我尝试使用querySelector方法访问DOM上的元素时，最终会遇到null。

我尝试实现AfterViewInit类无济于事。这是我当前针对该组件的dart代码：

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>

谢谢。

Answer 1

所以这看起来应该可行。我实际上不建议这样做，因为它将通过上载类获取任何元素，如果您重用该组件，将会很多。

我建议改用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，但是从您显示的代码中我不确定为什么。

Angular Dart 2-querySelect返回null

1 个答案: