AngularDart组件集成SlickDart网格时出现错误求助

嘿，我看你这是在AngularDart里集成SlickDart网格时遇到了DOM元素找不到的问题吧？结合你的代码和错误截图，我帮你梳理下问题和修复方案：

首先先看你遇到的错误截图：

问题根源 #

你代码里的核心问题有两个：

1. 初始化时机不对：ngOnInit钩子触发时，组件的模板DOM还没完全渲染完成，这时候用全局的querySelector('#grid')根本找不到目标元素
2. DOM元素获取方式错误：AngularDart组件默认的视图封装机制，会让组件内部的DOM元素无法被全局的querySelector访问到

修复方案 #

我给你调整了代码，主要做了这几个关键改动：

1. 修改模板，添加模板引用变量

给网格容器加上#grid标记，让Angular能直接定位到这个元素：

<div class="row justify-content-center">
  <div #grid style="width:100%; height:500px;"></div>
</div>

2. 调整组件类，改用正确的钩子和元素获取方式

import 'package:angular/angular.dart';
import 'package:slickdart/slick.dart' as grid;
import 'dart:html';
import 'package:intl/intl.dart';
import 'package:slickdart/src/slick_custom.dart';
import 'package:slickdart/src/slick_editor.dart';

@Component(
  selector: 'slick-grid',
  styleUrls: const ['slickGrid_component.css'],
  templateUrl: 'slickGrid_component.html',
  directives: const [],
)
class SlickGridComponent implements AfterViewInit {
  @Input() Map data;
  @ViewChild('grid') Element gridElement; // 通过模板引用获取元素

  @override
  void ngAfterViewInit() {
    // 等视图完全渲染后再初始化网格
    if (gridElement != null && data != null) {
      final gridInstance = init(data, gridElement);
      gridInstance.init();
    }
  }

  grid.SlickGrid init(Map passedData, Element el){
    final opt = {
      'explicitInitialization': false,
      'multiColumnSort': false,
      'frozenColumn': 0,
      'frozenRow': 1,
      'editable': true
    };

    final columns = grid.ColumnList.fromMap(passedData["fields"]);
    final gridData = passedData["data"];
    return grid.SlickGrid(el, gridData, columns, opt);
  }
}

改动说明 #

• 换成ngAfterViewInit钩子：这个钩子会在组件视图完全渲染完成后才触发，保证我们要操作的DOM元素已经存在
• 用@ViewChild获取元素：通过模板引用变量#grid，Angular可以直接拿到组件内部的DOM元素，完全避开了全局查询的问题，也不受视图封装的限制
• 增加空值检查：防止data还没从父组件传过来，或者元素获取失败时出现空指针异常

这样修改后，应该就能正常初始化SlickDart网格了~

内容的提问来源于stack exchange，提问作者Nikolay Krastev