angular9的学习(十二)插槽

参考资料

https://www.freecodecamp.org/news/
https://kb.kutu66.com/tag/javascript
https://t.codebug.vip/
https://javascript-conference.com/blog/
https://www.tektutorialshub.com/ 这个教程不错
https://www.concretepage.com/   这两个
https://blog.kevinyang.net/ 还有这个
https://www.concretepage.com/angular
https://morioh.com/
https://dev.to/
https://codinglatte.com/
http://gdut_yy.gitee.io/doc-csstdg4/#features  CSS 权威指南 4th
https://www.bennadel.com/blog/complete-blog-entry-list.htm
https://blog.angular-university.io/
https://www.c-sharpcorner.com/
https://www.madewithangular.com/
https://indepth.dev/

angular9调试

不知道其他版本能不能,我用的angular9

html
<app-one id="ccc"></app-one>
组件里面
public titles: string = 'hello angular';
{{titles}}

在浏览器控制台

let a=document.querySelector('#ccc');
// 拿到这个组件
let b=ng.getComponent(a)
// 修改值
b.titles=10
//但是发现页面没有被改变
ng.applyChanges(a)
//页面数据更新啦

main.ts应用程序入口点

11 行
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

platformBrowserDynamic是模块,负责在桌面浏览器中加载Angular应用程序

然后调用根模块bootstrapModule

ngModel

ngModel不属于Angular/Core 库,他属于angular/forms

所以你要在模块里面引入FormsModule

import { FormsModule } from '@angular/forms';

(input)

<input (input)="add($event)">
add(val) {
    console.log(val.target.value);
  }

这种方式是拿到DOM类型

利用模板引擎拿到传递的值

<input #els (input)="add(els)">

 add(event) {
    let a = (<HTMLInputElement> event.target).value;
    console.log(a);
  }

<input (keyup.enter)="value2=$event.target.value">
<input (keyup.control.shift.enter)="value4=$event.target.value"> // 组合键

<input type="text" class="form-control" [(ngModel)]="courseName" > 

https://www.tektutorialshub.com/angular/angular-adding-child-component/

ng-content 内容投影

<app-home>
    <h1>Heroic Title</h1>
    <p>Something good...</p>
	<app-nav></app-nav>
</app-home>   

app-home.components.html

<ng-content select="app-nav"></ng-content>
<ng-content></ng-content>

展示的内容就是
	app-nav // 这个组件的内容
    <h1>Heroic Title</h1>
    <p>Something good...</p>

如果是特定的属性的元素
<ng-content select="[app-nav]"></ng-content>

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>

ng-container

是一个分组的元素,不会干扰样式或布局,因为Angular不会把他放在dom中

<ng-container>
 <div>1231</div>
 <div>345</div>
 <div>123</div>
</ng-container>
也可以用作条件的判断
<p>
  I turned the corner
  <ng-container *ngIf="hero">
    and saw {{hero.name}}. I waved
  </ng-container>
  and continued on my way.
</p>

ng-template

也可以动态的创建模板

priblic a=1
---------
<div *ngIf="a==2; else add">
  显示
</div>

<ng-template #add>
  <div>我是独立的div</div>
</ng-template>
------

<ng-container *ngTemplateOutlet="loading"></ng-container>
<ng-template #loading>
    <div>loading</div>
</ng-template>

点击的时候禁用input框

  public control = new FormControl('xxxx');

 clickDown() {
    // emitEvent: false  不出发 valueChange
    this.control.enabled ? this.control.disable({emitEvent: false}) : this.control.enable({emitEvent: false});
  }

<input [formControl]="control">
<button (click)="clickDown()">点我</button>

RXJS

需求一个流用来监听a

当点击时候,第二个流用来监听b

export class ComponentOneComponent implements OnInit, AfterViewInit, OnDestroy {

  constructor() {

  }

  ngAfterViewInit(): void {

  }

  fromKeyDown(str) {
    fromEvent<KeyboardEvent>(document, 'keydown').pipe(
      map(e => e.key),
      filter(key => key === str)
    ).subscribe(res => {
      console.log(res);
    })
  }

  ngOnInit(): void {
    // 第一个流用来监听a
    // 当点击按钮的时候,第二个流用来监听b
    this.fromKeyDown('a');
  fromEvent(document.querySelector('button'),'click').subscribe(()=>{
      this.fromKeyDown('b')
    })
  }

}

补充一个小知识点

 let sub = new Subject();
    sub.subscribe(res=>{
      console.log(res);
    });
    sub.next(1);
    sub.next(2);
    sub.subscribe(res=>{
      console.log(res);
    })

Form

如果出现'hasError' of null 报错

export class AppComponent  {
  form = this.formBuilder.group({
    firstName: [''],
    lastName: [''],
    age: [''],
  });

  controls = {
    firstName: this.form.get('firstName'),
    lastName: this.form.get('lastName'),
  }

  constructor(private formBuilder: FormBuilder) {}
}

<form [formGroup]="form">
  <div>
    <label for="firstName">First Name</label>
    <input formControlName="firstName" id="firstName"/>
    <span *ngIf="controls.lastName.touched && controls.firstName.hasError('required')" class="errors">
      Field is required
    </span>
  </div>

  <div>
    <label for="lastName">First Name</label>
    <input formControlName="lastName" id="lastName"/>
    <span *ngIf="controls.lastName.touched && controls.lastName.hasError('required')" class="errors">
      Field is required
    </span>
  </div>
</form>

DecimalPipe

将数字转换为字符串

{{xxx |number:a.b-c}}
a: 小数点前最小的整数位数,默认为1
b: 小数点后的最小位数,默认0
c: 小数点后的最大位数,默认3

num=4.9734
{{num|number:'1.1-2'}} //最小1位数,最大两位数,第3位会四舍五入
// 4.97
num=4.978
// 4.98
num=4.403
//4.4
num=4.905
// 4.91