首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular Firebase ngIf用户已通过身份验证,监听程序在页面重新加载时不起作用

基础概念

Angular 是一个用于构建动态 Web 应用程序的开源前端框架。Firebase 是一个提供后端服务的平台,包括实时数据库、身份验证、云存储等。*ngIf 是 Angular 中的一个结构型指令,用于根据条件显示或隐藏 DOM 元素。

相关优势

  • Angular: 提供了强大的模板语法、依赖注入系统和模块化架构,使得开发大型应用更加容易。
  • Firebase: 提供了一个完整的后端解决方案,可以快速集成到前端应用中,减少了服务器端的开发和维护工作。

类型

  • Angular 指令: *ngIf 是 Angular 的一种内置指令,用于条件渲染。
  • Firebase 服务: 身份验证服务(Authentication)用于管理用户登录状态。

应用场景

  • 用户身份验证: 在需要根据用户是否登录来显示不同内容的场景中使用 *ngIf 和 Firebase 身份验证。
  • 动态内容显示: 根据用户的操作或数据变化动态显示或隐藏页面元素。

问题原因及解决方法

当页面重新加载时,Angular 的变更检测机制可能不会自动触发,导致 *ngIf 指令没有正确更新视图。Firebase 身份验证状态的监听也可能因为页面刷新而中断。

解决方法

  1. 确保 Firebase 身份验证状态监听器在 Angular 组件初始化时设置
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';

@Component({
  selector: 'app-authenticated',
  template: `
    <div *ngIf="isAuthenticated">
      Welcome, {{ user.displayName }}!
    </div>
    <div *ngIf="!isAuthenticated">
      Please log in.
    </div>
  `
})
export class AuthenticatedComponent implements OnInit {
  user: firebase.User | null = null;
  isAuthenticated = false;

  constructor(private afAuth: AngularFireAuth) {}

  ngOnInit() {
    this.afAuth.authState.subscribe(user => {
      this.user = user;
      this.isAuthenticated = !!user;
    });
  }
}
  1. 使用 Angular 的 OnPush 变更检测策略

在组件类上使用 ChangeDetectionStrategy.OnPush,这可以减少不必要的变更检测,提高性能。

代码语言:txt
复制
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-authenticated',
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AuthenticatedComponent implements OnInit {
  // ...
}
  1. 确保 Firebase SDK 已正确初始化

index.html 或 Angular 项目的入口文件中确保 Firebase SDK 已正确初始化。

代码语言:txt
复制
<!-- index.html -->
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js"></script>
<script>
  var firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  firebase.initializeApp(firebaseConfig);
</script>

参考链接

通过以上方法,可以确保在页面重新加载时,Angular 和 Firebase 的身份验证状态监听器能够正常工作。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 之 结构型指令几个概念

NgIf案例分析 该指令接受一个布尔值,并据此让一整块DOM树出现或者消失。 注意:这里是出现或者消失,并不是隐藏。 隐藏元素的利弊 当我们隐藏元素,组件的行为还在继续。...它仍然附加子啊它所属于的DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定的变更。组件原本要做的哪些事情仍然进行!它还是占用着那么多的资源。...当ngIf重新变成true的时候,angular重新创建该组件及其子树。angular重新运行每个组件的初始化逻辑。...而在Angular应用中,Angular会移除 标签及其子元素。 我们可以通过把短语"Hip! Hip! Hooray!"...,Angular的控制下,DOM的效果是不同的。 ?

3K20
  • 一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    它还监视项目源中的每个更改并重新编译所有更改,之后它会要求浏览器重新加载打开的页面。因此,通过使用Angular CLI,我们已经开发环境中工作,无需编写配置或实际执行任何操作。...每次我们改变我们的代码Angular CLI都会重新编译,如果需要的话重新注入,并要求我们的浏览器页面打开重新加载页面。...Angular做得非常快,所以大多数情况下,当你将你的窗口从IDE切换到浏览器,它已经为你重新加载了。...让我们试着在用户击中enter密钥做到这一点。我们需要监听组件中的DOM keypress事件并输出由此触发的Angular事件。...随着我们的应用程序的增长,我们可能会开始考虑优化。例如,如果我们想要将关于组件加载为默认组件,并且只在用户通过单击卡片链接隐式请求后才加载附加组件,该怎么办。为此,我们可以使用延迟加载模块。

    42.6K10

    AngularDart4.0 英雄之旅-教程-07路由 顶

    用户在任一视图中点击英雄名称,导航至所选英雄的详细视图。 当用户点击电子邮件中的深层链接,打开特定英雄的详细视图。 完成后,用户将可以像这样浏览应用程序: ?...开始阶段 继续英雄之旅之前,请确认您具有以下结构。 ? 如果该应用程序尚未运行,请启动该应用程序进行更改时,请通过重新加载浏览器窗口来保持运行。...当用户通过应用程序导航,路由器会在正下方显示每个组件。 刷新浏览器,然后访问localhost:8080 /#/ heroes。 你应该看到英雄列表。...浏览器中,转至应用程序根目录(/)并重新加载。 该应用程序显示dashboard ,您可以dashboard 和heroes之间导航。 ...仪表板或英雄列表中选择英雄不起作用。 你会接下来的处理。 选择一个仪表板英雄 当用户选择仪表板中的英雄,应用程序应该导航到HeroDetailComponent以允许用户查看和编辑选择的英雄。

    17.6K30

    AngularDart4.0 英雄之旅-教程-04明细 顶

    当您进行更改时,请通过重新加载浏览器窗口来保持运行。 应用程序重构 添加新功能之前,您可以从应用程序重构中受益。 应用模板文件 您将对应用程序组件的模板进行多次更新。...这是你ngFor指令中定义的同一个英雄变量。 在用户输入页面和模板语法页面的事件绑定部分了解有关事件绑定的更多信息。...指令隐藏空的对象 当应用程序加载,selectedHero为null。...刷新浏览器,该应用程序不再失败,名称列表再次显示浏览器中。 当没有选定的英雄ngIf指令从DOM中移除英雄详情HTML。 没有英雄细节元素或绑定担心。...结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。 格式化选中hero 当选择的英雄细节显示列表下方,很难列表中识别选定的英雄。

    3K30

    AngularDart4.0 指南- 显示数据 顶

    您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中,您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表,并有条件地列表下方显示一条消息。...最终的用户界面如下所示: ? 现场示例(查看源代码)演示了此页面中描述的所有语法和代码片段。 用插值显示组件属性 显示组件属性的最简单方法是通过插值来绑定属性名称。...当这些属性改变Angular会更新显示。 更准确地说,重新显示是与视图相关的某种异步事件之后发生的,例如按键,计时器完成或对HTTP请求的响应。...用NgIf进行条件显示 有时候,只有特定情况下,应用程序才需要显示视图或视图的一部分。 如果有三个以上的英雄,让我们更改示例以显示一条消息。... 不要忘记* ngIf中的星号(*)。 这是语法的重要组成部分。 “模板语法”页面ngIf部分阅读有关ngIf和*的更多信息。

    5.3K10

    angular面试题及答案_angular面试

    问题就在于请求/响应中消耗了大量时间,或者是重新加载使用了大量时间。而在SPA技术中,即使URL不断变化,我们也只维护一个页面(index.HTML)。 13....Authorization(授权):登录成功后,经过身份验证或真正的用户不能访问所有内容。用户未被授权访问其他人的数据,他/她被授权访问某些数据。 16. AOT编译 和JIT编译?...当没有配置base标签加载应用会失败。 23....Angular的懒加载 默认情况下,初始化的时候所有路由都会加载,导致加载缓慢,启动速度慢,所以可以使用懒加载加载 : 通俗 的讲就是进入主模块之后,子模块不加载,等真正访问到子模块之后,再去加载...6)如果应用程序较大,我会考虑延迟加载而不是完全捆绑的应用程序。 27. 使用Angular的好处 可以添加自定义的directive. 优秀的社区支持。 客户端和服务器的通讯非常便利。

    11.1K120

    Angular 显示英雄列表

    页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...主从结构 当用户主列表中点击一个英雄,该组件应该在页面底部显示所选英雄的详情。 本节,你将监听英雄条目的点击事件,并更新英雄的详情。...click 外面的圆括号会让 Angular 监听这个  元素的 click 事件。 当用户点击  Angular 就会执行表达式 onSelect(hero)。...英雄们显示列表中,并且所点英雄的详情也显示页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在才显示所选英雄的详情。...当用户选择一个英雄,selectedHero 也就有了值,并且 ngIf 把英雄的详情放回到 DOM 中。

    4.4K70

    AngularDart4.0 指南- 模板语法二 顶

    父指令通过绑定监听此属性并通过$event对象访问内容。payload:承载数据 考虑一个呈现英雄信息并响应用户操作的HeroDetailComponent。...这些变化通过系统渗透,并最终显示相关视图。 双向绑定([(…)]) 您经常希望显示数据属性,并在用户进行更改时更新该属性。 元素另一方面为元素更改事件组合设置特定元素属性和监听。...例如,TypeScript Angular程序通常具有诸如* ngIf =“currentHero”的代码,其中Dart程序具有诸如* ngIf =“currentHero!...当NgIf为falseAngular从DOM中删除元素及其后代。 它摧毁了他们的组件,潜在地释放了大量的资源,从而带来了更加快速的用户体验。 展示/隐藏技术适合少数几个后代的元素。...等待数据的时候,视图应该没有怨言地呈现,而null属性路径应该像title属性一样显示为空白。 不幸的是,当currentHero为空,应用程序崩溃。 你可以用*ngIf来解决这个问题。 <!

    30K20

    Angular 显示英雄列表

    页面,你将扩展《英雄指南》应用,让它显示一个英雄列表, 并允许用户选择一个英雄,查看该英雄的详细信息。 创建模拟(mock)英雄数据 你需要一些英雄数据以供显示。...主从结构 当用户主列表中点击一个英雄,该组件应该在页面底部显示所选英雄的详情。 本节,你将监听英雄条目的点击事件,并更新英雄的详情。...click 外面的圆括号会让 Angular 监听这个  元素的 click 事件。 当用户点击  Angular 就会执行表达式 onSelect(hero)。...英雄们显示列表中,并且所点英雄的详情也显示页面的下方。 修复 - 使用 *ngIf 来隐藏空白的细节 该组件应该只有当 selectedHero 存在才显示所选英雄的详情。...当用户选择一个英雄,selectedHero 也就有了值,并且 ngIf 把英雄的详情放回到 DOM 中。

    4K30

    【译】我是如何学习任意前端框架的

    2.Auth App 我在上一节中提到的一些端点API(可能)需要一些身份验证,因此在这一节中尝试添加或构建另一个带有登陆/注册页面的应用程序。...你将学到: 路由守卫:某些页面只允许通过身份验证用户(访问) 如何发送并保存JWT(JSON Web令牌)以发出需要经过身份验证用户请求 3.CRUD App 增删查改的应用程序是本节中最受欢迎的前端应用程序...,你可以使用本地存储或者使用在线服务(如Firebase)来构建此应用程序,甚至将它与后端框架集成在一起。...尝试为后端框架添加auth功能 4.聊天应用 在前面的章节中,对后端的所有请求都是单向的,你管理应用程序状态没有问题。...你将学到: 学习如何使用管理状态解决方案,如redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何将其与客户端应用程序集成 使你的应用更灵活

    3.6K10

    Angular 从入坑到挖坑 - 组件食用指南

    通过使用 $event 作为方法的参数会将许多用不到的模板信息传递到组件中,导致我们仅仅是为了获取数据的前提下,却需要对于页面元素十分了解,违背了模板(用户所能看到的)与组件(应用如何去处理用户数据)...="expr">NgIf 结构型指令 当 expr 属性为 true ,这个元素则会显示页面上,当属性值为 false ,则不显示该元素 ngIf 指令并不是通过使用 css 样式来隐藏元素的...,当值为 false ,则这些元素会从 dom 中被销毁,并且所有监听该 dom 元素的事件会被取消,当重新显示该元素,会重新执行初始化的过程 与销毁元素不同,对于隐藏的元素来说,所有的元素监听事件还会执行监听的...,会获取到条数据的索引值 当渲染的数据发生改变 4,会导致 dom 元素的重新渲染,此时可以采用 trackBy 的方式,通过组件中添加一个方法,指定循环需要跟踪的属性值,此时当渲染的数据发生改变...组件加载过程中,会按照上面列出的钩子函数顺序,组件的构造函数执行之后依次执行,页面加载过程中会涉及绑定数据的操作,因此会再次出发 ngDoCheck、ngAfterContentChecked

    15.8K30

    2018年Web开发人员应该学习的12个框架

    它允许Web开发人员创建大型Web应用程序,这些应用程序可以随时更改而无需重新加载页面。 Web开发世界分为Angular和React,由您自己选择。...你可以通过编写几行代码来执行动画,发送HTTP请求,重新加载页面以及执行客户端验证。...11)Firebase Firebase是Google的移动平台,可帮助你快速开发高质量的移动应用并发展业务。你可以选择Firebase作为Android或iOS应用程序的后端。...如果你希望2018年进入利润丰厚的移动应用程序开发业务,那么学习Firebase是一个非常好的主意,高级iOS和Firebase:Rideshare是一个很好的起点。...12)Xamarin Xamarin是一种通过单个共享C#代码库为所有平台快速制作移动应用程序的方法,为每个平台构建自定义本机用户界面,或使用Xamarin.Forms跨平台编写单个共享用户界面。

    5.5K40

    浅谈Angular

    它可通过 标签添加到HTML 页面。 AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。...*ngIf--控制元素的显隐性 ?:ng-show和*ngIf的区别是什么?...ng-show本质上设置元素的display值为none,只是设置样式,DOM结构还在,而*ngIf是真正意义上的从DOM结构中移除 *ngFor--动态创建DOM结构 ngSwitch--通过匹配case...从Observable的中文名:”可观察的”就能看出,Observable的作用是可以起到类似监听的作用,但它的监听往往都是页面中, 6.组件间通信: 1.父向子 -- @Input装饰器声明输入属性...,要声明子组件里 2.子向父 -- @Output装饰器声明事件,要声明子组件里 3.兄弟之间 -- 中间人模式 拓展:事件源对象 事件中,当前操作的那个元素就是事件源。

    4.4K10

    理论 | Angular 中的响应式编程 -- 浅淡 Rx 的流式思维

     Rx--隐藏在Angular 2.x中利剑 一文中我们已经初步的了解了 Rx 和 Rx Angular 的应用。 今天我们一起通过一个具体的例子来理解响应式编程设计的思路。...按常规套路来讲,我们得声明 Subscription 对象,因为 Observable 是一直监听的,即使页面销毁,它也还在,这会造成内存泄漏。...所以,我们需要再页面销毁(ngOnDestroy 中)的适合取消订阅。 需要订阅的 Observable 少的时候还好,一旦多起来,处理也挺麻烦,像下面的代码那样。...Angular 4 中的 NgIf 的改进 Angular 4 中的 ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能的。...比如下面例子中:如果用户登录成功显示用户名,否则显示登录链接。 另一个改进是 ngIf 中现在可以将评估表达式的结果赋值给一个变量,好处是什么呢?

    5.3K10

    Angular 从入坑到挖坑 - 表单控件概览

    ,从而生成错误信息列表 进行用户输入数据有效性验证控件上通过添加一个模板引用变量来暴露出 ngModel,从而在模板中获取到指定控件的状态信息,之后就可以通过获取错误信息列表来进行反馈 <div...,一个 FormControl 类的实例对应于一个表单控件,使用时,通过将控件的实例赋值给属性,后续则可以通过监听这个自定义的属性来跟踪表单控件的值和状态 import { Component, OnInit...4.3.2、通过 FomGroup 组合多个控件 一个表单不可能只有一个控件,通过组件中构造 FormGroup 实例来完成对于多个表单控件的统一管理 使用 FormGroup ,同样组件中定义一个属性用来承载控件组实例...当构建复杂表单,可以 FormGroup 中通过嵌套 FormGroup 使表单的结构更合理 import { Component, OnInit } from '@angular/core';...,模板页面中,则需要通过获取整个表单的错误对象信息来获取到交叉验证的错误信息 姓名:

    18.9K20

    Flutter 2.8正式版发布了,还不来看看

    此外,一些开发人员想要更多的关于光栅缓存行为的性能跟踪信息,以减少制作动画效果的卡顿,这允许 Flutter 快速地对昂贵的、重复使用的图片进行复用而不是重新绘制。...你还可以通过可用用户标签列表中选择此用户标签过滤器(如果存在)来加载应用启动配置文件。选择此标签会显示你的应用启动的个人资料数据。...Firebase 用户界面 大多数用户都有身份验证的流程,包括但不仅限于通过邮箱和密码或者第三方账号登陆等。...这个 package 可以用少量的代码构建一个基本的身份验证体验,例如, Firebase 项目中设置了使用邮箱和 Google 账号登陆: 通过这个配置你可以通过下面的代码构建一个身份验证: import...是响应性设计,因此桌面浏览器上,它会是这样的效果: 用户可以使用邮箱地址和密码直接完成登陆,如果他们选择使用通过谷歌身份验证登陆,不论是移动端、Web 端还是桌面端,则将会看到常见的 Google

    22.4K30

    Angular 快速学习笔记(1) -- 官方示例要点

    通过注入,服务可以多个“互相不知道”的类之间共享信息 d....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你顶层提供该服务Angular...Angular 的最佳实践之一就是一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    3.6K00

    Angular 快速学习笔记(1) -- 官方示例要点

    通过注入,服务可以多个“互相不知道”的类之间共享信息 d....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你顶层提供该服务Angular...Angular 的最佳实践之一就是一个独立的顶级模块中加载和配置路由器,它专注于路由功能,然后由根模块 AppModule 导入它 b. ng generate module app-routing...添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏中输入某个 URL ,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏中 URL 的字符串...本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    3.7K50
    领券