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>