angular自带的一些api_angular9的学习(八)组件的内置api

不创建spec.ts测试文件

ng g c text1 --skipTests=true

number 管道

把数字变成字符串

a=3.1233121

{{a|number}}

// 3.123 默认保留三位小数

JsonPipe

let a={aa:'xxx',bb:'bb'}

{{a|json}}

LowerCasePipe

{{a|lowercase}}

NgComponentOutlet

把组件插入视图中

public arr1: any[] = [TextThreeComponent, TextTwoComponent];

NgTemplateOutlet

Hello

TitleCasePipe

首字母大写

{{a | titleCase}}

ViewportScroller

定位滚动位置管理器

333

constructor(private scroller:ViewportScroller) { }

ngAfterViewInit() {

// 拿到 id=foot的位置

this.scroller.scrollToAnchor('foot')

// 自定义位置

this.scroller.scrollToPosition([0,100])

// 当前的位置

this.scroller.getScrollPosition()

// 禁用自动滚动恢复

this.scroller.setHistoryScrollRestoration()

}

@Attribute

指令传值, 某值作为常量字符串文字注入

1211212

@Directive({

selector: '[appTextTwo]'

})

export class TextTwoDirective{

constructor(@Attribute('numbers') types:string) {

console.log(types); //value

}

}

ContentChild

拿到ng-content投射的组件

父

子

export class TextTwoComponent implements OnInit,AfterContentInit {

@ContentChild(TextOneComponent) divs: any;

constructor() {

}

ngOnInit(): void {

}

ngAfterContentInit(){

console.log(this.divs);

}

}

ContentChildren

拿到ng-content 的DOM

父

sssss

子

export class TextTwoComponent implements OnInit,AfterContentInit {

@ContentChildren(TextOneComponent) tabs!: QueryList;

constructor() {

}

ngOnInit(): void {

}

ngAfterContentInit(){

console.log(this.tabs);

}

}

ViewChildren

不包含 ng-content 标签存在的元素

父

子

export class TextTwoComponent implements OnInit, AfterViewInit {

@ViewChildren(FriendComponent) friend: QueryList;

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++);

}

}