角镖路线导致无错误的黑屏

时间:2018-10-17 14:42:49

标签: angular firebase dart angular-dart

我试图将“ Angular Dart英雄之旅”用作我要构建的WebApp的模型。

我将其更改为使用FireBase作为数据提供程序,而不是模拟客户端。

这是应用程序组件:

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 Example应用程序在任何类上都没有“ Injectable()”,但是其他Samples应用程序却具有。

我想念什么?在此先感谢

1 个答案:

答案 0 :(得分:0)

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

此外,我创建了一个Firebase服务来处理事物的Firebase部分。

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

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