一、背景知识：
Angular 通过被称为 指令 的新属性来扩展 HTML。 Angular 通过内置的指令来为应用添加功能。 Angular 允许你自定义指令。
二、知识剖析
在 Angular 中有三种类型的指令： 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。 组件是这三种指令中最常用的。 结构型指令修改视图的结构。例如，NgFor 和 NgIf。 属性型指令改变一个元素的外观或行为。例如，内置的 NgStyle 指令可以同时修改元素的多个样式。
上一版本的 Angular 中包含了超过 70 个内置指令。 社区贡献了更多，这还没算为内部应用而创建的无数私有指令。 在新版的 Angular 中不需要那么多指令。 使用更强大、更富有表现力的 Angular 绑定系统，其实可以达到同样的效果。
常用的内置属型指令：
NgClass - 添加或移除一组 CSS 类
NgStyle - 添加或移除一组 CSS 样式
NgModel - 双向绑定到 HTML 表单元素
常用的内置结构型指令：
NgIf - 根据条件把一个元素添加到 DOM 中或从 DOM 移除
NgSwitch 一组指令，用来在多个可选视图之间切换。
NgForOf - 对列表中的每个条目重复套用同一个模板。
三、常见问题
如何使用内置指令
四、解决方案
利用CANACTIVATE接口及 LOCALSTORAGE
-
添加到DOM元素内即可
五、编码实战
六、拓展思考
Ngif指令，为什么是移除而不是隐藏？？ ngIf 指令并不是使用 CSS 来隐藏元素的。它会把这些元素从 DOM 中物理删除。 使用浏览器的开发者工具就可以确认这一点。 当条件为假时，NgIf 会从 DOM 中移除它的宿主元素，取消它监听过的那些 DOM 事件，从 Angular 变更检测中移除该组件，并销毁它。 这些组件和 DOM 节点可以被当做垃圾收集起来，并且释放它们占用的内存。 对于简单的段落，隐藏和移除之间的差异影响不大，但对于资源占用较多的组件是不一样的。 当隐藏掉一个元素时，组件的行为还在继续 —— 它仍然附加在它所属的 DOM 元素上， 它也仍在监听事件。 Angular 会继续检查哪些能影响数据绑定的变更。 组件原本要做的那些事情仍在继续。
虽然不可见，组件及其各级子组件仍然占用着资源，而这些资源如果分配给别人可能会更有用。 在性能和内存方面的负担相当可观，响应度会降低，而用户却可能无法从中受益。 当然，从积极的一面看，重新显示这个元素会非常快。 组件以前的状态被保留着，并随时可以显示。 组件不用重新初始化 —— 该操作可能会比较昂贵。 这时候隐藏和显示就成了正确的选择。 但是，除非有非常强烈的理由来保留它们，否则你会更倾向于移除用户看不见的那些 DOM 元素，并且使用 NgIf 这样的结构型指令来收回用不到的资源。 同样的考量也适用于每一个结构型指令，无论是内置的还是自定义的。 你应该提醒自己慎重考虑添加元素、移除元素以及创建和销毁组件的后果。
七、参考文献
https://angular.cn/guide/attribute-directives
八、更多讨论
Q1:怎么把一个数组的值全部打印出来
A1:使用ngfor 循环一遍即可
Q2: ngfor循环[1,3,2,4,3,4]数组会报错吗？如果会怎么解决？
A2: 不会，虽然有重复的值，项实际上是不一样的
Q3: 添加或者移除class使用什么指令？
A3: ngclass添加或移除一组 CSS 类
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。
快来与我一起学习吧~邀请链接 http://www.jnshu.com/login/1/14303208