angular 随笔而记

第三个路由中的 ​data ​属性是存放与该特定路由关联的任意数据的地方。每个激活的路由都可以访问 ​data ​属性。可以用它来存储页面标题，面包屑文本和其它只读静态数据等项目。可以用解析器守卫来检索动态数据。

在 Angular 应用中导航也会和标准的 Web 导航一样更新浏览器中的历史。

添加一个 ​CanLoad ​守卫，它只在用户已登录并且尝试访问管理特性区的时候，才加载 ​AdminModule ​一次。

CanActivate ​保护 ​AdminModule ​了，它会阻止未授权用户访问管理特性区。如果用户未登录，它就会跳转到登录页

当应用启动时，​AppModule ​被急性加载，这意味着它会立即加载。而 ​AdminModule​ 只在用户点击链接时加载，这叫做惰性加载。

#变量
映射插槽
Observer

preloadingStrategy: PreloadAllModules，这项配置会让 ​Router ​预加载器立即加载所有惰性加载路由（带 ​loadChildren ​属性的路由）。

CanLoad ​守卫的优先级高于预加载策略

要加载一个模块并且保护它防止未授权访问，请移除 ​canLoad ​守卫，只单独依赖​CanActivate​守卫。

preload ​的实现要返回一个 ​Observable​。如果该路由应该预加载，它就会返回调用加载器函数所返回的 ​Observable​。如果该路由不应该预加载，它就返回一个 ​null ​值的 ​Observable ​对象。

查看路由配置：
console.log('Routes: ', JSON.stringify(router.config, replacer, 2));

<form #itemForm="ngForm" (ngSubmit)="onSubmit(itemForm)">
  <label for="name">Name</label>
  <input type="text" id="name" class="form-control" name="name" ngModel required />
  <button type="submit">Submit</button>
</form>

如果没有 ​ngForm ​这个属性值，​itemForm ​引用的值将是 HTMLFormElement 也就是 ​<form>​ 元素。而 ​Component ​和 ​Directive ​之间的差异在于 Angular 在没有指定属性值的情况下，Angular 会引用 ​Component​，而 ​Directive ​不会改变这种隐式引用（即它的宿主元素）。

而使用了 ​NgForm ​之后，​itemForm ​就是对 ​NgForm ​指令的引用，可以用它来跟踪表单中每一个控件的值和有效性。

与原生的 ​<form>​ 元素不同， ​NgForm ​指令有一个 ​form ​属性。如果 ​itemForm.form.valid​ 无效，那么 ​NgForm ​的 ​form ​属性就会让你禁用提交按钮。

在模板中，要使用井号 # 来声明一个模板变量。下列模板变量 #phone 声明了一个名为 phone 的变量，其值为此 <input> 元素。

虽然 Angular 框架并没有针对可观察对象的强制性命名约定，不过你经常会看到可观察对象的名字以“$”符号结尾

数组的值发生变化时组件不能检测到变化，也就无法重新加载，这时可以使用Subject解决此类问题