Angular Dart 2 - querySelect返回null

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，但是从你显示的代码中我不知道为什么。