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