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']
})

如果修改成组件属性的型式

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

如果修改组件的 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']
}) 

如果修改组件的头部输入命令的时候不已app开头

修改angular.json

 "prefix": "app",  把app

对应的指令directive 修改也一样

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

api模块

common

时间指令 DatePipe

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

slicePipe

{{'123456789'|slice:2:8}}
345678

ng-container

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

 
1231
 
345
 
123

也可以用作条件的判断

  I turned the corner
  
    and saw {{hero.name}}. I waved
  
  and continued on my way.

ng-template

也可以动态的创建模板

priblic a=1
---------

  显示



  
我是独立的div

------



    
loading

发现一个以前不知道的父传子,子传父的问题

父组件

子组件
  @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(); //主要限制emit的参数

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

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

home.html



export class HomeComponent implements OnInit, AfterViewInit { //在这后面添加生命周期
  @ViewChild('pagination') pagination:NewComponent; //NewComponent 是子组件的函数 
也可以写成这样
  @ViewChild(NewComponent) pagination:NewComponent;

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

ng-content 类似vue里面的插槽

父组件

  
这是h1标签


子组件

new works!


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;
}


  
123
 //这个有颜色
  

  

  
123
  

  
213
 // 这个有颜色
  
213
  
213