Angular
- 如果想要实现默认的嵌套多级路由,并且希望将路由定义在别的地方,似乎只能使用 loadModule 来实现
- 内容映射可以使用
ng-content
实现- 例如
<ng-content select="header"></ng-content>
- 例如
- angular-cli.json
- ngrx/store
- Angular Weekly Meeting Notes
- Angular Universal Design
- Augury
- Angular Debugging and Visualization Tools
- 相关资源
- Angular resources
- CDK
- What is
cdk
in Angular Material 2 components - component dev kit
- A first look into the Angular CDK
- Angular Pro Tip: How to dynamically create components in body
- 提供接口供
Portal
和PortalHost
动态实例化 Portal
- 注入到其他地方的部分 UI 组件,
Component
,TemplateRef
- 注入到其他地方的部分 UI 组件,
PortalHost
- 渲染
Portal
的地方 DOMPortalHost
- 渲染
- What is
- NOTES:
- 目前没有比较好的退出登录 ICON, power_settings_new 算是最接近的了
- Angular 9 默认 Ivy
npm install -g @angular/cli
ng new my-app
// 处理 window 的事件
// window 还可以为
// document, window, body
// https://github.com/angular/angular/blob/3412aba46e387b234d72e9194e2308f1d71a62df/modules/angular2/src/platform/server/parse5_adapter.ts#L533
@HostListener('window:resize', ['$event'])
onResize(event) {
event.target.innerWidth;
}
// 绑定 host 上的 class
@HostBinding('class.someClass') someField: boolean = false;
# 全局安装 ng
# 或者 npm i -g @angular/cli
yarn global add @angular/cli
# 如果全局路径不在 PATH 中可以添加以下命令输出的路径
yarn global bin
# 或者直接运行
$(yarn global bin)/ng
# 修改现有项目的样式类型
ng set defaults.styleExt scss
# 如果出现无法处理 css 的异常, 则修改 angular-cli.json 中的 "styles":["styles.css"] 为 "styles":["styles.scss"]
# 生成项目时使用 scss
ng new my-roject --style=scss
# 在当前目录,生成路由,添加 ServiceWorker
ng new --routing -sw --style scss -dir . proj
ng add @angular/pwa
ng add @angular/material
ng add @angular/elements
ng generate @angular/material:material-nav --name=my-nav
ng generate @angular/material:material-dashboard --name=my-dashboard
ng generate @angular/material:material-table --name=my-table
# 查看压缩情况
source-map-explorer dist/main.bundle.js
Notes
- ng-container
- ngTemplateOutlet
*ngTemplateOutlet="customTemplate ? customTemplate: defaultTemplate"
- 模板容器
- ngTemplateOutlet
- ng-template