-
angular中获取DOM节点
- 使用原生js获取
在生命周期方法ngAfterViewInit()中获取dom节点
-使用@ViewChild装饰器获取
在模板中给dom添加变量 #box
在类中使用@ViewChild(‘box’) mybox, 使用ViewChild获取Dom节点,并赋值给变量mybox
改变dom属性,this.mybox.nativaElement.style.color=“red”- @ViewChild也可以获取组件,如在父组件中可以获取子组件的实例
- 使用原生js获取
-
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"
]
- 添加默认路由的两种方式
{path: '', redirectTo:'/home', pathMatch:'full'}
意思是当项目启动时,浏览器指向项目根路径,而根路径没有匹配任何路由,因此重定向到’home’{path: '**', component: PageNotFountComponent}
**是一个路径通配符,表示除了定义的path,其他都会加载这个组件,因此应该放在最后定义。
- 路由配置中的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{}
- NgModule中的entryComponents的作用?
入口组件:Angular使用entryComponents来启用“树震动”,即只编译项目中实际使用的组件,而不是编译所有在ngModule中声明但从未使用的组件
entryComponents(入口组件)与declarations(声明组件)的区别?
- 入口组件(entry component)是通过组件的类型动态加载
- 声明式组件会在模板里通过组件声明的selector加载组件。
入口组件是通过指定的组件类加载组件。
主要分为三类: - 在@NgModule.bootstrap里声明的启动组件,如AppComponent。
- 在路由配置里引用的组件
- 其他通过编程使用组件类型加载的动态组件
- 组件间通讯
- 父组件向子组件传值@input,可以传入值,方法以及整个组件(使用this传递)
- 父组件主动获取子组件的数据,通过@ViewChild
- 子组件主动广播数据,父组件被动接收,使用@Output和EventEmiter
- 非父子组件传值,使用localStorage或者服务。
- 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);
})
- Angular请求数据(get,post,jsonp)
import { HttpClientModule } from @angular/common/http
- 第三方模块axios
- 路由
页面标签路由跳转
//实现当前路由选中状态
<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中希望子组件显示的地方写<router-outlet></router-outlet>
11.自定义模块
ng g module userModule --routing
创建自定义模块时带路由
路由配置实现模块懒加载