Angular Dart 路由导致空白屏幕没有错误

Question

我正在尝试使用 Angular Dart 英雄示例教程作为我正在尝试构建的 Web 应用程序的模型。

我正在将其更改为使用 FireBase 作为数据提供者而不是 mockClients。

这是应用组件：

import 'package:angular/angular.dart';
import 'package:firebase/firebase.dart';
import 'package:firebase/firestore.dart' as fs;
import 'src/todo_list/hero.dart';
import 'package:angular_router/angular_router.dart';
import 'src/todo_list/routes.dart';

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  template: '''
  <h1>This is the title</h1>
  <router-outlet [routes]="Routes.all"></router-outlet>
  ''',
  directives: [coreDirectives, routerDirectives],
  exports: [RoutePaths, Routes],

)
class AppComponent implements OnInit {
  List<Hero> heroes = [];

  //REDACTED HERE, BUT FIREBASE SHOWN TO BE WORKING BEFORE ADDING ROUTING
  @override
  ngOnInit() {
    initializeApp(
    apiKey: "* * * * * * * *",
    authDomain: "* * * * * * * *",
    databaseURL: "* * * * * * * * *",
    projectId: "* * * * * * * * *",
    storageBucket: "* * * * * * ",
    messagingSenderId: "* * * * * * "
);

//Database db = database();
//DatabaseReference ref = db.ref('items');

fs.Firestore store = firestore();
fs.CollectionReference ref = store.collection("items");

  ref.onSnapshot.listen((querySnapshot) {
    querySnapshot.docChanges().forEach((change) {
     if (change.type == "added") {
       var docSnapshot = change.doc;
       var id = docSnapshot.data()['id'];
       var name = docSnapshot.data()["name"];
       var full = docSnapshot.data()["pickupNeeded"];
       var item = new Hero(id, name, full);
       heroes.insert(0, item);
        }
      });
    });
  }
}

问题似乎与 main.dart 上的注入器有关，因为应用程序崩溃时就是这样。

import 'package:angular/angular.dart';
import 'package:untitled2/app_component.template.dart';
import 'package:angular_router/angular_router.dart';

import 'main.template.dart' as self;

@GenerateInjector(
  routerProvidersHash,
)
final InjectorFactory injector = self.injector;

void main() {
  runApp(AppComponentNgFactory, createInjector: injector);
}

我注意到 AngularDart Tour of Heroes 示例应用在任何类上都没有 "Injectable()"，但其他示例应用有。

我错过了什么？提前致谢

Answer 1

对于任何遇到类似问题的人来说，最好的解决方案似乎是将 firebase 初始化移动到 main.dart 文件中。

此外，我创建了一个 Firebase 服务来处理 Firebase 部分。

从 Firebase 实际创建的列表已移至显示在应用程序组件中的仪表板组件。

将所有内容分开解决了这个问题。

Angular Dart 路由导致空白屏幕没有错误

Angular Dart Routing causes Blank Screen With No Errors

dart

firebase

angular-dart

angular