汪·课
github-circle-white-transparent
作者:
汪志成
发表:
2020年3月4日
修改:
2020年3月7日
收录:
技术原创

Angular 随手记

Angular 写久了,几乎变成了凭本能编码,已经不知道什么值得说了。回答的问题又分散在各处,所以干脆开个文章,想到或被问到什么就记什么吧,各段落之间没有逻辑关系。

NgModule 的用途

假设我们有一个非常复杂的组件,比如一个图形编辑器,它内部包括 30 个组件,20 个指令,但对于使用者来说,它只提供了一个对外的组件。那么你就应该只把这一个对外的组件加入到 NgModule 的 exports 中。

这有什么好处呢?首先是提供了一个命名空间,你的内部组件和指令可以和其它模块中的组件使用相同的 selector,而不用担心冲突问题;更重要的是,你不用担心其它模块中的人依赖你的这些内部实现,否则你将来想重构这个模块的时候,该怎么处理那些没有经过你的同意就依赖过来的代码呢?或者干脆就认栽不重构了。

这就相当于 java 中的 package private 访问控制。即使在 TypeScript 中都没有提供这种支持,更何况在模板中还没法指定组件的导入源。

base-href

有时候你需要把应用部署到一个 context-path 下,比如 http://example.com/my-app。特别是在企业应用中很常见。

你只要在编译时加一个参数就可以了:ng build --prod --base-href=/my-app。注意,这里的 / 不能省略。

加了这个参数之后,所有 Angular 内置的功能都会识别它。在 [routerLink] 中你写 / 开头的绝对路径时,它会自动帮你把 base href 附加到前面,比如 routerLink="/" 会被解析成 /my-app/。当你调用 HttpClient 时也一样,比如 this.http.get('/api/users') 时,它实际上请求的地址是 /my-app/api/users

如果是 Angular 没有内置的功能,可能不会自动支持 base href。你可以自己来解决。你在应用中可以通过 document.baseURI 取到当前的 base href(即使 index 中没有 base 标签,也能正确取到它)。