Angular 容易忽略的知识点及注意事项

模板内的局部变量

<input #heroInput>
<p>{{heroInput.value}}</p>

调用子组件方法 ：#child

<child #child></child>
<button (click)="child.childFn()" class="btn btn-success">调用子组件方法</button>

对于 @Input 型的属性，在构造函数里面是取不到值的，在 ngOnInit 里面才有值。

特别注意：对于业务开发者来说，一般只用到 ngOnInit 这个钩子，其它几个钩子在日常业务开发中是用不到的。

注意：用代码动态创建组件这种方式在一般的业务开发里面不常用，而且可能存在一些隐藏的坑，如果你一定要用，请小心避雷。

强烈建议你只做一个组件，就像 zTree 的作者那样，把一个组件做好、做透，并且长期维护下去。这比搞一个庞大的组件库，每个组件做得都像个玩具，然后突然弃坑要好很多。

如果要在同一个 HTML 元素上面使用多个结构性指令，可以考虑加一层空的元素来嵌套，比如在外面套一层空的 ，或者套一层空的

。

NgModule 是@angular/cli 打包的最小单位。打包的时候，@angular/cli 会检查所有@NgModule 和路由配置，如果你配置了异步模块，cli 会自动把模块切分成独立的 chunk（块）。这一点是和其它框架不同的，其它框架基本上都需要你自己去配置 webpack，自己定义切分 chunck 的规则；而在 Angular 里面，打包和切分的动作是@angular/cli 自动处理的，不需要你干预。当然，如果你感到不爽，也可以自己从头用 webpack 配一个环境出来，因为@angular/cli 底层也是用的 webpack。

你想啊，既然你启用了前端路由，也就意味着浏览器地址栏里面的那些 URL 在 Server 端并没有真正的资源和它对应，你直接访问过去当然 404 了。

以 Tomcat 为例，你需要在 web.xml 里面加一段配置：

404 / 这意思就是告诉 Tomcat，对于 404 这种事你别管了，直接扔回前端去。由于 Angular 已经在浏览器里面接管了路由机制，所以接下来就由 Angular 来负责了。

如果你正在使用其它的 WEB 容器，请从以下链接里面查找对应的配置方式：

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
Angular 新版本的路由机制极其强大，除了能支持无限嵌套之外，还能支持模块懒加载、预加载、路由守卫、辅助路由等高级功能，在接下来的几个小节里面我们就来写例子一一演示。

Angular Router 模块的作者是 Victor Savkin，这是他的个人 Blog：https://vsavkin.com/，他专门编写了一本小薄书来完整描述 Angular 路由模块的设计思路和运行原理，这本书只有 151 页，如果你有兴趣请点这里：https://leanpub.com/router。

【前端图片引入和处理】
@技术很有趣
如果是在ts文件中，需要require，即基于webpack的模块化方式，将引入后的图片变量赋值给对象属性，最终在页面加载的图片会在图片名称后面添加哈希值，类似pic-name122ae345.png。
如果是在css文件中，比如background-url属性，直接通过相对路径引入。最终在页面加载的图片会在图片名称后面添加哈希值，类似pic-name122ae345.png。