学习Angular

1. angular中获取DOM节点

   • 使用原生js获取
     在生命周期方法ngAfterViewInit()中获取dom节点
     -使用@ViewChild装饰器获取

   在模板中给dom添加变量 #box
   在类中使用@ViewChild(‘box’) mybox, 使用ViewChild获取Dom节点，并赋值给变量mybox
   改变dom属性，this.mybox.nativaElement.style.color=“red”

   • @ViewChild也可以获取组件，如在父组件中可以获取子组件的实例

2. angular使用bootstrap
   npm install bootstrap
   修改angular.json中的build后的styles和scripts

 		  "styles": [
              "src/styles.scss",
              "./node_modules/tether/dist/css/tether.min.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/tether/dist/js/tether.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

3. 添加默认路由的两种方式

• {path: '', redirectTo:'/home', pathMatch:'full'}
  意思是当项目启动时，浏览器指向项目根路径，而根路径没有匹配任何路由，因此重定向到’home’
• {path: '**', component: PageNotFountComponent}
  **是一个路径通配符，表示除了定义的path，其他都会加载这个组件，因此应该放在最后定义。

4. 路由配置中的pathMatch项

const routes = [
    {path:'', redirectTo:'/', pathMatch:'full'}
    {path:'home', component: HomeComponent}
    ]

定义路由时不能加’/’,routerLink中应该加’/’

pathMatch:
 - `prefix`:以指定的路径开头开头的路由
 - `full`: 全字匹配，必须与指定的路径完全一样

5.安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
6. forRoot是用来干什么的？
假设模块A这样定义：

@NgModule({
	providers:[AService],
	declarations:[TitleComponent],
	exports:[TitleComponent]
})
export class A{}

如果有模块B导入了模块A，那么在B中，会生成子注入器将AService重新生成，如果我们只想使用同一个A，就可以使用forRoot

@NgModule({ 
    providers: []，
    declarations: [ TitleComponent ],
    exports:      [ TitleComponent ],
})
export class A {
   static forRoot() {
        return {ngModule: A, providers: [AService]};
   }
}

在跟模块AppModules中使用A.forRoot()导入A模块

@NgMOdules({
	imports:[A.forRoot()]
})
export class AppMosule{}

在模块B中正常导入A模块

@Ngmodules({
	imports:[A]
})
export class BMosule{}

7. NgModule中的entryComponents的作用？
   入口组件：Angular使用entryComponents来启用“树震动”，即只编译项目中实际使用的组件，而不是编译所有在ngModule中声明但从未使用的组件
   entryComponents(入口组件)与declarations(声明组件)的区别？

• 入口组件（entry component）是通过组件的类型动态加载
• 声明式组件会在模板里通过组件声明的selector加载组件。
  入口组件是通过指定的组件类加载组件。
  主要分为三类：
• 在@NgModule.bootstrap里声明的启动组件，如AppComponent。
• 在路由配置里引用的组件
• 其他通过编程使用组件类型加载的动态组件

8. 组件间通讯
   • 父组件向子组件传值@input，可以传入值，方法以及整个组件(使用this传递)
   • 父组件主动获取子组件的数据，通过@ViewChild
   • 子组件主动广播数据，父组件被动接收，使用@Output和EventEmiter
   • 非父子组件传值，使用localStorage或者服务。
9. angular中获取数据
   • 数据来自service组件

//同步数据
export DataService(){
	getData(){
	let data='我是同步的信息';
	return data
}
//回调函数数据
getCallBackData(cbd){
	setTimeout({
	let callbackdata='我是回调函数数据'
	cbd(callbackdata);
},1000);
}
}
//定义Promise数据
getPromiseData(){
	return new Promise((resolve) = > {
		setTimeOut({
			let promiseData =  "promise Data";
			resolve(promiseData);
},1000);
}){
}
}
//定义rxjs数据
getRxjsData(){
	return new Observable(observer =>{
		setTimeOut({
	let rxjsData="rxjs Data";
	observer.next(rxjsData);
},1000)
})
}

• 同步获取数据

	constructor(private dataService: DataService){}
	getData(){
			console.log(this.dataService.getData());
}

-通过callback回调函数异步获取数据

	getCallBackData(){
		this.dataService.getCallBackData(data => {
		this.callBackData = data;
		console.log(this.callBackData);
})
}

• 通过Promise异步获取数据

	getPromiseData(){
		let promiseData = this.dataService.getPromiseData();
		promiseData.then(data => {
			console.log(data);
})
}

• 通过rxjs异步获取数据

let rxjsData = this.dataService.getRxjsData();
rxjsData.subscribe(data=>{
	console.log(data);
})

10. Angular请求数据(get,post,jsonp)

• import { HttpClientModule } from @angular/common/http
• 第三方模块axios

11. 路由
    页面标签路由跳转

//实现当前路由选中状态
<a [routerLink]="['/home']" routerLinkActive="active">首页</a>

路由参数

//get传值
<a [routerLink]="['/home']" [queryParams]="{id:id}"></a>
//动态路由
<a [routerLink="['/home',id]"></a>

接收路由参数

//get传值
import { ActivedRouter } from '@angular/route'
constructor(activedRouter: ActivedRouter){}
this.activeRouter.queryParams.subscribe((data)=>{
	console.log(data)
})
//动态路由
this.activedRouter.params.subscribe((data)=>{
	console.log(data)
})

js路由跳转

//动态路由跳转
import { Router } from '@angular/router'
constructor(route: Router){}
this.route.navigate(['/home'])
//get传值路由跳转
import { Router, NavigationExtras } from '@angular/router'
let params:NavigationExtras = {
	id:1,
	name:'zhangsan'
}
this.route.navigate(['/home'],params)

父子路由(路由的嵌套)

const appRoutes: Routes = [
{
path:'home',component:HomeComponent,
	children:[
		{path:'home-child1',component:HomeChild1Component},
		{path:'home-child2',component:HomeChild2Component},
		{path:'',redictTo:'/home-child1'},
]
}
]
<a [routeLink]="['/home/home-child1']"></a>

在父组件的html中希望子组件显示的地方写

11.自定义模块
ng g module userModule --routing 创建自定义模块时带路由
路由配置实现模块懒加载