blog-angular

blog-angular copied to clipboard

## AsyncPipe [官方文档](https://angular.io/api/common/AsyncPipe) 基本使用方法 ``` {{ obj_expression | async }} ``` 异步管道会监听一个`Observable`或者`promise`,并且会使用它返回的最终数据，异步管道使得组件可以对变化进行检测。当组件卸载的时候，异步管道会自动取消监听以避免潜在的内存泄露。 - 例子 ``` greeting: Promise|null = null; private resolve: Function|null = null; this.greeting = new Promise((resolve, reject) =>...

deepthan

##### 使用方法： ``` number_expression(value) | number[:digitInfo[:locale]] ``` ``` {{ e | number:'3.1-5'}} {{ 数字 | number :'限定的范围' }} ``` ##### 作用 根据给定的范围，将数字转换为符合格式的文本。 - `value`值是一个数字类型 - `digitInfo `是一个字符串形如： `{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}` - `minIntegerDigits`:...

deepthan

# 一个文件中同一段html被多次用到怎么抽离 可以抽离成一个组件，也可以使用`ngTemplateOutlet`来实现共享 比如说有一段代码 ``` 第一区域 共享的部分 第二区域 共享的部分 ``` 如何将共享的部分抽离出来呢？ ```html 第一区域 第二区域 共享的部分 ``` ngTemplateOutlet接收的是一个模板名称，即`#shared`,可以自定义。如果想传递参数请查看`ngTemplateOutlet`介绍。

deepthan

# 如何根据条件决定是否添加指令 > [ref](https://stackoverflow.com/a/47725361) 有个指令，我想它有时候被添加上，有时候去除，可以传进去一个布尔值来实现吗？ 不可以。没办法直接使用条件判断是否添加指令，不过可以分成两部分，一个添加了指令的区域，一个未添加的，再通过判断显示哪个。 未避免代码冗余将公用的部分抽取出来： ```html 这是一个共享的内容 ``` **需要添加指令** ```html ``` **不需要添加指令** ```html ```

deepthan

# 自定义指令 做一个点击图片放大至全屏，再点击缩小的效果。 其实就是给这个元素动态添加和移除calss。 **html** ``` ``` css ``` .image-default { position: relative; width: 500px; margin: 2.4em 1em; img{ width: 100%; } transition: all .3s ease-out; } .image-enlarged{ height: 100%;...

deepthan

# NgTemplateOutlet > [官网介绍](https://angular.cn/api/common/NgTemplateOutlet) | [源码](https://github.com/angular/angular/blob/9.0.x/packages/common/src/directives/ng_template_outlet.ts) ## 代码示例 ``` Hello {{data}}! {{ detail }} ``` ## 作用 将一个`ng-template`包裹的模板插入到宿主元素中。 ## 参数 - ngTemplateOutlet: TemplateRef | null 第一个参数是需要传入的模板 - ngTemplateOutletContext: Object |...

deepthan

# ng-container vs ngTemplateOutlet `` 是一个不会干扰样式或布局的分组元素，Angular 不会将其放入DOM中。 ### 结合结构性指令使用 如`ngFor` ```

deepthan

# ng-content ## 是什么？ 它是一个插槽，可以把父组件的dom元素传递到子组件中。相当于vue里的`slot`。 ## 如何使用 ### 直接传递小示例 > 父组件有一段文本'可爱的小猫'，传入子组件中 父组件ts ```typescript @Component({ selector: 'parent', template: ` 可爱的小猫 `, }) ``` 子组件ts ```typescript @Component({ selector: 'son', template: ` `,...

deepthan

# ng-template ### 是什么 `ng-template`是一个模板元素，它里面的内容不会渲染，只有其他代码主动调用读取它，它才会显示出来。 它一般和结构型指令结合使用，如*ngIf, *ngFor, [ngSwitch]或其他自定义指令。 如果只是像下面这样写不会显示出来。 ``` 这是一块正经的内容 ``` ### 怎么用 ``` 小猫 小狗 ``` 一般使用场景是有一段html代码，在某个时刻需要使用到会把它包裹在`ng-template`中。

deepthan

# ngStyle #### 添加变量到ngStyle中 ```typescript pWidth = '100' ``` ```html ``` #### 根据变量添加不同属性 ```typescript showP = false ``` ``` ``` ## 花式添加style #### ts中直接在组件顶层dom添加style ``` @Component({ selector : 'p-sample', host...

deepthan