Angular 随手记link

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

NgModule 的用途link

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

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

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

base-hreflink

有时候你需要把应用部署到一个 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 标签，也能正确取到它）。