angular9的學習(一)

啟動項目

 ng new xxx --style=less --routing=true

如果引入UI框架的時間css不生效

在styles.less
@import '../node_modules/....'

組件

如果需要修改組件的名稱

@Component({
  selector: 'app-new1',// 直接在這里修改
  templateUrl: './new.component.html',
  styleUrls: ['./new.component.less']
})
<app-new1></app-new1>

如果修改成組件屬性的型式

@Component({
  selector: '[app-new1]',
  templateUrl: './new.component.html',
  styleUrls: ['./new.component.less']
})
<div app-new1></div>

如果修改組件的 app 的頭部

tslint.json 添加

"component-selector": [
      true,
      "element",
      "app",
      "sky", //添加
      "kebab-case"
    ],
    
@Component({
  // selector: '[app-new1]',
  selector: '[sky-new1]',
  templateUrl: './new.component.html',
  styleUrls: ['./new.component.less']
}) 
<div sky-new1></div>

如果修改組件的頭部輸入命令的時候不已app開頭

修改angular.json

 "prefix": "app",  把app

對應的指令directive 修改也一樣

 "directive-selector": [
      true,
      "attribute",
      "app",
      "camelCase",
      "yl" //添加自己想要的
    ],

api模塊

common

時間指令 DatePipe

<div>{{date|date:'yyyy-MM-dd hh:mm:ss'}}</div>
2020-03-26 10:15:57

slicePipe

<div>{{'123456789'|slice:2:8}}</div>
345678

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>

發現一個以前不知道的父傳子,子傳父的問題

父組件
<yl-home [home]="num" (add)="add($event)"></yl-home>
子組件
  @Input('home') home;
  @Output('add') add = new EventEmitter();

輸出屬性綁定到的DOM屬性的名稱。
 具體細節查看 api @angular/core

封裝的請求

this.http.get().subscribe({
    next:v={},
    error:err=>{},
    complate:()=>{}
})
第二種
this.http.get().subscribe(
value=>{},
err=>{},
()=>{},    
)
//這種寫法可以抽出來
const observer={
    next:v={},
    error:err=>{},
    complate:()=>{}
}
this.http.get().subscribe(observer)

理解了一個以前不太懂的東西

home.ts
export interface Home {
  name:string;
  age:number
}

home.component.ts
import {Home} from './home'
@Output('add') add = new EventEmitter<Home>(); //<Home>主要限制emit的參數

clickMount(){
    this.add.emit({name:'xxx',age:12})
  }

添加生命周期並且查找子代

home.html

<div sky-new1 #pagination></div>

export class HomeComponent implements OnInit, AfterViewInit { //在這后面添加生命周期
  @ViewChild('pagination') pagination:NewComponent; //NewComponent 是子組件的函數 
也可以寫成這樣
  @ViewChild(NewComponent) pagination:NewComponent;

  constructor() {
  }
  ngAfterViewInit() {
    console.log(this.pagination);
  }
    
}

ng-content 類似vue里面的插槽

父組件
<app-new>
  <h1>這是h1標簽</h1>
</app-new>

子組件

<p>new works!</p>
<ng-content></ng-content>

app-new 里面的內容就在 ng-content里面

公司打包配置

   "start": "ng serve --open --host 0.0.0.0 --disable-host-check --port 4203 --proxy-config proxy.conf.js",
    "build": "ng build --aot --output-path base/ --deploy-url 服務器打包后的路徑 --base-href 服務器打包后的路徑 --prod",

Schematics 開啟自動化命令行

懶路由升級的問題

棄用
**LoadChildren不建議使用字符串形式**
{path:'',loadChildren:'./components/block/block.module#BlockModule'}

改成 函數的寫法
 {path:'',loadChildren:()=>import('./components/block/block.module').then(mod=>mod.BlockModule)}
但是angular7在使用的時候會出現報錯的情況
需要在tsconfig.json里的 "module": "esnext"

angular.json Budgets功能

budgets:[
   {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
]
就是打包后的文件大於2mb報警告,大於5mb報錯

angular 必備的兩個webstrom插件

Angular CLI QuickSwitch
Angular Component Folding
Alt+s 進行切換
如果練習TS可以加上
Run Configuration for TypeScript

text-transform 字母大小寫

text-transform: caitalize; 首字母大寫
			   uppercase; 全部大寫
			   lowercase; 全部小寫
			   none;

flex一些我很少使用的技巧(flex-grow/flex-basis)

.box{  //父
  width: 100%;
  height: 50px;
  display:flex;
  flex-direction: row;
  justify-content:space-between;
}
.box1{ // 子
  flex-grow:1;  //占寬度一份
  flex-basis:0; //使用列的大小相同,不考慮內容
  background-color: magenta;
}

發現一個css選擇器的問題

以前 last-child first-child

現在 last-of-type first-of-type 先進不容易弄錯

某父元素下相同類型子元素中的first/last

nth-child(n)

:nth-child(n)  某個父元素的第N個子元素,不論元素的類型
.box :nth-child(3) {
  background-color: mediumseagreen;
}

nth-of-type

.box :nth-of-type(1){ 父元素指定的ele類型同時還是第n個子元素
  background-color: lavender;
}

<div class="box">
  <div class="box1">123</div> //這個有顏色
  <div class="box2"></div>
  <div class="box2"></div>
  <div class="box1">123</div>
  <div class="box2"></div>
  <h1>213</h1> // 這個有顏色
  <h1>213</h1>
  <h1>213</h1>
</div>