我试图将“ 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应用程序却具有。
我想念什么?在此先感谢
答案 0 :(得分:0)
对于任何有类似问题的人,似乎最好的解决方案是将firebase初始化移动到main.dart文件。
此外,我创建了一个Firebase服务来处理事物的Firebase部分。
从Firebase实际创建的列表已移至显示在应用程序组件中的仪表板组件。
将所有内容分开解决了问题。