如何使用离子2 /角度2和打字稿设置firebase
发布时间:2020-12-17 07:50:49 所属栏目:安全 来源:网络整理
导读:从离子1过渡到离子2并且很好奇如何从’somewhere / foo /’设置firebase import *作为Firebase的东西;使用他们的打字稿示例. bower是在离子中安装js依赖项的标准方法 2或者我应该使用其他一些构建链/工具来添加 像Firebase这样的东西? 我应该使用bower inst
从离子1过渡到离子2并且很好奇如何从’somewhere / foo /’设置firebase import *作为Firebase的东西;使用他们的打字稿示例.
> bower是在离子中安装js依赖项的标准方法 这是firebase教程https://www.firebase.com/docs/web/libraries/ionic/guide.html中的旧代码 的index.html <!-- AngularFire --> <script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script> app.js angular.module("starter",["ionic","firebase"]) 其中只包含对Firebase库的cdn引用.我们如何在离子2和打字稿中做到这一点
ionic2应用程序中没有bootstrap …
>你可以为angularfire2和firebase加载npm模块 app.ts import 'es6-shim'; import {App,Platform} from 'ionic-angular'; import {StatusBar} from 'ionic-native'; import {HomePage} from './pages/home/home'; import {FIREBASE_PROVIDERS,defaultFirebase,AngularFire} from 'angularfire2'; @App({ template: '<ion-nav [root]="rootPage"></ion-nav>',providers: [ FIREBASE_PROVIDERS,defaultFirebase('https://[YOUR-APP].firebaseio.com/') ],config: {} // http://ionicframework.com/docs/v2/api/config/Config/ }) export class MyApp { rootPage: any = HomePage; constructor(platform: Platform) { platform.ready().then(() => { // Okay,so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. StatusBar.styleDefault(); }); } } home.ts import {Page} from 'ionic-angular'; import {Component} from 'angular2/core'; import {AngularFire} from 'angularfire2'; import {Observable} from 'rxjs/Observable'; @Page({ template: ` <ion-navbar *navbar> <ion-title> Home </ion-title> </ion-navbar> <ion-content class="home"> <ion-card *ngFor="#item of bookItems | async"> <ion-card-header> {{item.volumeInfo.title}} </ion-card-header> <ion-card-content> {{item.volumeInfo.description}} </ion-card-content> </ion-card> </ion-content>` }) export class HomePage { bookItems: Observable<any[]>; constructor(af: AngularFire) { this.bookItems = af.list('/bookItems'); } } git repo中的完整源代码 – aaronksaunders/ionic2-angularfire-sample 您可以侦听这样的身份验证事件 ngOnInit() { // subscribe to the auth object to check for the login status // of the user,if logged in,save some user information and // execute the firebase query... // .. otherwise // show the login modal page this.auth.subscribe((data) => { console.log("in auth subscribe",data) if (data) { this.authInfo = data.password this.bookItems = this.af.list('/bookItems'); } else { this.authInfo = null this.displayLoginModal() } }) } See Code Here (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |