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

Angular 2显示登录后被ngIf隐藏的侧边栏

Angular 2是一种流行的前端开发框架,用于构建单页应用程序。它基于TypeScript语言,并且具有强大的组件化和数据绑定功能。

对于显示登录后被ngIf隐藏的侧边栏的问题,可以通过以下步骤解决:

  1. 在Angular 2中,可以使用ngIf指令来根据条件显示或隐藏DOM元素。在这种情况下,我们可以使用ngIf指令来控制侧边栏的显示和隐藏。
  2. 首先,在组件的HTML模板中,将侧边栏的HTML代码包裹在一个div元素中,并使用ngIf指令来判断用户是否已登录。例如:
代码语言:html
复制
<div *ngIf="isLoggedIn">
  <!-- 侧边栏的HTML代码 -->
</div>
  1. 在组件的TypeScript代码中,定义一个布尔类型的变量isLoggedIn,并根据用户的登录状态来设置它的值。例如:
代码语言:typescript
复制
export class AppComponent {
  isLoggedIn: boolean = false;

  // 在适当的时机,根据用户的登录状态来设置isLoggedIn的值
  // 例如,在用户登录成功后,将isLoggedIn设置为true
  // 在用户注销或登录失败后,将isLoggedIn设置为false
}
  1. 当用户成功登录后,将isLoggedIn设置为true,这将导致侧边栏的div元素被显示出来。反之,当用户注销或登录失败时,将isLoggedIn设置为false,这将导致侧边栏的div元素被隐藏起来。

这样,当用户登录后,侧边栏将显示出来;当用户注销或登录失败时,侧边栏将被隐藏起来。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云服务器(CVM):提供可扩展的云服务器实例,适用于各种规模的应用程序。产品介绍链接
  • 腾讯云对象存储(COS):提供安全、可靠、低成本的云端存储服务,适用于存储和处理大量非结构化数据。产品介绍链接
  • 腾讯云云函数(SCF):无服务器计算服务,可帮助开发者构建和运行无需管理服务器的应用程序。产品介绍链接

请注意,以上仅为示例推荐,实际选择产品时应根据具体需求进行评估和选择。

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

相关·内容

EasyCVR登录通道数据及菜单页面显示异常排查与解决

有用户反馈,登录EasyCVRWeb页面,发现设备和分组信息都无法加载,而且菜单导航显示不全,版本信息也无法打开,请求我们协助排查。...技术人员配合项目现场排查发现,原来是数据库问题,但是自动生成数据库是正常。于是进一步排查是否为数据库错乱导致。对比新老数据库发现设备表缺少一个gb_device_id字段。...排查现场其他备份数据库测试,发现备份数据库也没有这个gb_device_id字段,但是数据和格式都是正常。...后续排查用户角色表 t_user_roles表,发现rolesid不对,因此是这个rolesid错误导致上述异常现象。...将t_user_roles表rolesid4改成1保存,然后再重启EasyCVR服务,随后平台已经正常运行了。

13910

Angular2 之 结构型指令几个概念

NgIf案例分析 该指令接受一个布尔值,并据此让一整块DOM树出现或者消失。 注意:这里是出现或者消失,并不是隐藏隐藏元素利弊 当我们隐藏元素时,组件行为还在继续。...另外一方面,重新显示这个组件会很快。 组件以前状态保留着,并随时可以显示。组件不用重新初始化,当然,该操作付出代价比较大!...在Angular应用之外,标签默认CSS属性display是none 。 它内容存在于一个隐藏文档片段中。... 这时候显示内容是'Hip! Hooray!',在Angular控制下,DOM效果是不同。 ?...template-in-out-of-a2.png 显然,Angular把标签及其内容替换成了一个空白 标签。 这只是它默认行为。

3K20

AngularDart 4.0 高级-结构指令 顶

还有其他两种Angular指令,在其他地方广泛描述:(1)组件和(2)属性指令。 组件以本地HTML元素方式管理HTML区域。 从技术上讲,这是一个模板指令。...当条件为false时,NgIf从DOM中删除它宿主元素,将它从DOM事件(它所依附)中分离出来,将组件从Angular变化检测中分离出来并销毁它。 组件和DOM节点可以垃圾收集并释放内存。...为什么要移除而不是隐藏? 指令可以通过将其显示样式设置为无隐藏不需要段落。...从积极方面来说,再次显示元素很快。 该组件以前状态保存并准备显示。 该组件不会重新初始化 - 这种操作可能很昂贵。 所以隐藏和展示有时候是正确。...满足Angular模板中类似需求。 编写一个结构指令 在本节中,您将编写一个与NgIf相反UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。

16K20

AngularDart4.0 指南- 显示数据 顶

当你完成,它应该是这样:lib/app_component.dart import 'package:angular/angular.dart'; @Component( selector: '...修改模板使用双重大括号插值显示两个组件属性: template: ''' {{title}} My favorite hero is: {{myHero}} 3”,看上去和表现很像Dart。 当组件英雄列表中有三个以上项目时,Angular会将该段落添加到DOM,并显示消息。...如果有三个或更少项目,Angular会忽略该段落,所以不会显示任何消息。 有关更多信息,请参阅模板语法页面的模板表达式部分。 Angular没有显示隐藏消息。...Dart类,用于为您组件生成模型数据并显示该模型属性。 ngIf有条件地显示基于布尔表达式HTML块。

5.3K10

angular知识点梳理第二篇-基本语法

文章目录 前文回顾 基本语法 常见指令 NgModel NgFor NgIf Ng-container 管道 前文回顾 前面已经写了关于angular项目的基本介绍和如何创建一个angular项目,这一篇主要梳理一些...list: Array = [{ title: '栗子', id: 0 }, { title: '苹果', id: 1 }, { title: '橘子', id: 2...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和css中display:none效果是一致,和visibility...:hidden是要区别开,当if判断为false时候,页面上是整个元素都消失了,而不是仅仅隐藏了css样式 在需要使用数据绑定组件进行数据处理 import { Component, OnInit...状态 当前isShow:{{isShow}} 我是一个div块 运行效果 true显示

2.5K30

完美实现SpringBoot+Angular普通登录

数据流 SpringBoot+Angular数据流,请参考我上一篇SpringBoot+Angular前后端分离数据流浅析。...当前台接收到返回值,再判断用户是否登录成功。 登录状态保存在哪?...一开始,可以保存在app组件中,然后V层使用ngIf直接获取C层变量就可以获取登录状态,但是依赖登录状态 登录状态储存在前台服务层一个变量中,所有的组件在渲染前都去找这个登录服务要数据,如果用户处于登录状态...图片.png 浏览器输入Url触发方法,生成组件 C层向Teacher服务订阅登录组件 C层获取登录状态isLogin$并赋值给本类islogin V层渲染页面,根据C登录状态来决定显示那些内容,如果未登录显示登录页...图片.png 浏览器触发导航C层Logout方法 导航调用M层setIsLogin(flase),把登录状态改成0 M层返回 把登录页返回给浏览器 三、合并图片 ?

1.5K10

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

修改size值流向样式绑定,使显示文本变大或变小。 双向绑定语法实际上只是属性(property)绑定和事件绑定语法糖。...'none' : 'block'">Hide with style 隐藏一个元素与用NgIf去除一个元素是完全不同。 当你隐藏一个元素时,该元素及其所有的后代仍然保留在DOM中。...当NgIf为false时,Angular从DOM中删除元素及其后代。 它摧毁了他们组件,潜在地释放了大量资源,从而带来了更加快速用户体验。 展示/隐藏技术适合少数几个后代元素。...警惕隐藏大型组件树; NgIf可能是更安全选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,它接受一个输入值并返回一个转换值。

29.9K20

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

在 Rx--隐藏Angular 2.x中利剑 一文中我们已经初步了解了 Rx 和 Rx 在 Angular 应用。 今天我们一起通过一个具体例子来理解响应式编程设计思路。...2、其中如果年龄小于等于3个月,按天为单位,如果小于等于2岁按月为单位,其余情况按岁为单位。其实就是考虑幼儿情况啦。 3、填年龄时,出生日期随之变化,因为无法精确,所以只需精确到选择单位即可。...Angular 中处理响应式表单只有 3 个步骤: 1、在组件 HTML 模版中给要处理控件加上 formControlName="blablabla" 2、form 标签中添加 [formGroup...Angular 4 中 NgIf 改进 Angular 4 中 ngIf 现在可以携带 else 了,如果你曾经使用过 Angular 就知道,原来我们是得写两个 ngIf 来完成类似的功能。...这个 else 可以携带一个模版引用。比如下面例子中:如果用户登录成功显示用户名,否则显示登录链接。 另一个改进是 ngIf 中现在可以将评估表达式结果赋值给一个变量,好处是什么呢?

5.2K10

Angular 2 + 折腾记 :(10) 初步了解动画,以及一步一步写个动画效果

前言 过渡动画这东西,在现代开发中是必不可少,死板和酷炫与之息息相关; ng2.x动画相关api是并入@angular/core这个核心模块,在angular4之后开始独立 但是,写法上差异不大...,只是引入变了,引入方式请参考我这篇文章: 问题2: 动画已经独立出一个专门模块 ---- angular2+过渡动画简介 Angular动画是基于标准Web动画API(Web Animations...void', [ animate(200, keyframes([ style({ height: '*', opacity: 1, offset: 0 }), // 与之对应,让元素从显示隐藏一个过渡...animate(200, keyframes([ style({ height: '*', opacity: 1, offset: 0 }), // 与之对应,让元素从显示隐藏一个过渡...--传递状态,跟常规绑定一致--> <h3 *ngIf="list && list.length === 0" class="text-center text-muted" [@bounceIn]=

93820

Angular 内容投影

同时根据 AuthRememberComponent 组件中 checkbox 值来控制是否显示 ”保持登录30天“ 提示消息。...` }) export class AppComponent { // ... } 接着我们需要在 AuthFormComponent 组件中引入 ContentChildren 装饰器,更新...因此,投影内容生命周期将被绑定到它被声明地方,而不是显示在地方。 这种行为有两个原因:期望一致性和性能。什么 “期望一致性” 意味着作为开发人员,可以基于应用程序代码,猜测其行为。...其中唯一方法就是查看第三方库代码,了解它们内部处理逻辑。将组件生命周期被绑定到我们应用程序组件而不是包装器意义是,开发者可以掌控计数器只实例化一次,而不用了解第三方库内部代码。...参考资源 ng-content 中隐藏内容 ng-conf-2018-content-projection

2.5K20

【Appetite】ionic3实录(七)次页实现及分析解决问题【下】

值更新会影响到dom,所以应该在数据更新从而使得dom更新完成再调用initSwiper方法。...问题二:为什么用[hidden],不用*ngIf或者ngSwitch? 因为前者只是隐藏,而后两者是会移除。...也就是说,前者只会初始化一次,而后两者每次显示都需要重新初始化,进一步说,若使用后两者方式,对于这里用到swiper,它不是一个angular封装起来组件,不会自动初始化,我们每次显示它时都需要显式调用一下...这并不是说都不要用*ngIf,因为当页面元素太多时会容易导致界面卡顿,所以没用多余元素应该移除,此时就用它。一句话说就是根据情况合理选择显示控制方法。...ion-slides组件,进而内部进行初始化,此时运行看效果如下,只是此时有个比较突兀2图向3图切换效果,有兴趣可以试试: ?

1.4K20
领券