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