Angular Dart Routing вызывает пустой экран без ошибок - PullRequest
Новая
       13

Angular Dart Routing вызывает пустой экран без ошибок

0 голосов
/ 17 октября 2018

Я пытаюсь использовать Пример Героев Angular Dart в качестве модели для WebApp, которое я пытаюсь создать.

Я изменяю его, чтобы использовать 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 ()» ни в каких классах, как другие приложения Samples.

Чего мне не хватает?Заранее спасибо

1 Ответ

0 голосов
/ 18 октября 2018

Для тех, у кого есть подобные проблемы, казалось, что лучшим решением было перенести инициализацию firebase в файл main.dart.

Кроме того, я создал службу Firebase, чтобы обрабатывать часть Firebase.

Фактическое создание списка из Firebase было перемещено в компонент Dashboard, который отображался в компоненте приложения.

Разделение всего решило проблему.

...