angular学习

1. angular常用命令
   1）使用npm安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org
//也可以安装一下yarn
npm install -g yarn --registry=https://registry.npm.taobao.org huo

2）安装脚手架

npm install -g @angular/cli

3）清除缓存

npm cache clean --force

4）运行项目

ng server --open

5）查看版本

ng v
node -v
npm -v

6）安装typescript

npm install -g typescript

2. ViewChild获取dom节点
   1）模板中给dom起一个名字

<div #mybox>
</div>

2）业务逻辑中引入ViewChild

import {Component,OnInit,ViewChild} from '@angular/core';

3）写在类里面

@ViewChild('mybox') mybox:any

4）ngAfterViewInit生命周期函数里面获取dom

this.mybox.nativeElement

3. 原生js获取dom节点

ngAfterViewInit(){
var boxDom:any = document.getElementById('box');
}

4. 路由的配置
   1）引入路由组件
   2）路由跳转

//newscontent为目标路由地址
<a [routerLink]="['/newscontent']">目标路由</a>

3）路由传值

//get传值

<a [routerLink]="['/newscontent']" queryParams="数组下标/要传入的值">目标路由</a>
//get接收
//引入ActiveRouter组件,在构造函数中声明ActiveRouter，接收
import ActiveRouter from '@angular/router'
construct(public route:ActiveRoute){}
this.router.queryParams.subscribe(data=>{
console.log(data);
})

4）动态路由

//路由配置文件
path:'news/:aid=""' component/news.component
//与get传值一样
this.router.queryParams.subscribe(data=>{
console.log(data);
})
将queryParams改为query即可

5）js路由跳转

//1.动态传值
引入声明模块，跳转
import {Router} from '@angular/router'
construct(public router:Router){}
this.router.navigate(['/home']);
this.router.navigate(['/newscontent','1243'])

//2.get传值
引入声明模块，跳转
import {Router} from '@angular/router'
construct(public router:Router){}
this.router.navigate(['/news'],{
	queryParams:{
	aid:1243
	}
});
this.router.navigate(['/newscontent','1243'])

3. nodejs版本降级
   1）清空本地安装的nodejs版本

//打开命令控制台，输入where node查看本地安装node路径
//在控制面板将已经安装的node.js卸载

2）安装nvm管理工具

//从官网下载安装包 https://github.com/coreybutler/nvm-windows/releases
//下载nvm-setup.zip文件
//双击nvm-setup.exe文件,自定义选择路径，路径中不要出现空格或中文字符

3）输入nvm -v查看是否安装成功
4）安装node.js版本

//输入nvm list available查看可用的node.js版本
//输入命令行nvm install node版本号(例如：nvm install 12.18.0)即可安装
//安装成功后，输入命令行nvm use node版本号（例如：nvm use 12.18.0）即可分别输入命令行node -v和npm -v查看版本号