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