angular9的学习(九)
作者:互联网
不创建spec.ts
测试文件
ng g c text1 --skipTests=truejs
number 管道
把数字变成字符串
a=3.1233121
{{a|number}}
// 3.123 默认保留三位小数
JsonPipe
let a={aa:'xxx',bb:'bb'}
<div>{{a|json}}</div>
LowerCasePipe
{{a|lowercase}}
NgComponentOutlet
把组件插入视图中
<div *ngFor="let item of arr1"> <ng-container *ngComponentOutlet="item"></ng-container> </div> public arr1: any[] = [TextThreeComponent, TextTwoComponent];
NgTemplateOutlet
<ng-container *ngTemplateOutlet="greet"></ng-container>
<ng-template #greet><span>Hello</span></ng-template>
TitleCasePipe
首字母大写
{{a | titleCase}}
ViewportScroller
定位滚动位置管理器
<div id="foot">333</div>
constructor(private scroller:ViewportScroller) { }
ngAfterViewInit() {
// 拿到 id=foot的位置
this.scroller.scrollToAnchor('foot')
// 自定义位置
this.scroller.scrollToPosition([0,100])
// 当前的位置
this.scroller.getScrollPosition()
// 禁用自动滚动恢复
this.scroller.setHistoryScrollRestoration()
}
@Attribute
指令传值, 某值作为常量字符串文字注入
<div appTextTwo numbers="value">1211212</div>
@Directive({
selector: '[appTextTwo]'
})
export class TextTwoDirective{
constructor(@Attribute('numbers') types:string) {
console.log(types); //value
}
}
ContentChild
拿到ng-content
投射的组件
父
<app-text-two>
<app-text-one></app-text-one>
</app-text-two>
子
<ng-content></ng-content>
export class TextTwoComponent implements OnInit,AfterContentInit {
@ContentChild(TextOneComponent) divs: any;
constructor() {
}
ngOnInit(): void {
}
ngAfterContentInit(){
console.log(this.divs);
}
}
ContentChildren
拿到ng-content
的DOM
父
<app-text-two>
<h1>sssss</h1>
</app-text-two>
子
<ng-content></ng-content>
export class TextTwoComponent implements OnInit,AfterContentInit {
@ContentChildren(TextOneComponent) tabs!: QueryList<TextOneComponent>;
constructor() {
}
ngOnInit(): void {
}
ngAfterContentInit(){
console.log(this.tabs);
}
}
ViewChildren
不包含
ng-content
标签存在的元素
父
<app-friend></app-friend>
子
export class TextTwoComponent implements OnInit, AfterViewInit {
@ViewChildren(FriendComponent) friend: QueryList<FriendComponent>;
constructor() {
}
ngOnInit(): void {
}
ngAfterViewInit(){
console.log(this.friend);
}
}
ViewChild
会在dom视图中查找能匹配上该选择器的第一个元素或指令,跟ViewChild类似
QueryList
适用于
ContentChildren
和ViewChildren
提供对象类型
HostListener
@Directive({selector: 'button[counting]'})
class CountClicks {
numberOfClicks = 0;
@HostListener('click', ['$event.target'])
onClick(btn) {
console.log('button', btn, 'number of clicks:', this.numberOfClicks++);
}
}
标签:console,log,scroller,ng,学习,constructor,class,angular9 来源: https://www.cnblogs.com/fangdongdemao/p/12703771.html