Angular : 绑定, 参数传递, 路由
如何把jquery导入angular
npm install jquery --save
npm install @type/jquery --save-dev
"node_modules/zui/dist/lib/jquery/jquery.js",
"node_modules/jquery/dist/jquery.js",
"node_modules/zui/dist/js/zui.min.js",
"node_modules/zui/dist/lib/dashboard/zui.dashboard.min.js",
"node_modules/zui/dist/lib/datetimepicker/datetimepicker.min.js"
-------------------------------------------------------------------------------------
angular 循环语法 *ngFor="let *** of ***"
-------------------------------------------------------------------------------------
插值绑定 {{ zhangsan.name }}
属性绑定 [href]="url" 可以用这种特性,把父组件的属性传递给子组件,但是子组件的属性必须要用@Input()装饰
DOM属性绑定,angular所有绑定都是绑定的dom属性,通过插值绑定和属性绑定(两个是一个东西,都是改变dom属性,最后插值绑定会转换为属性绑定)来改变dom属性
-------------------------------------------------------------------------------------
HTML属性绑定:
基本html属性绑定:[attr.colspan]="tableColspan"
css类绑定: [class]="xxx" 这样的话xxx类会完全替换掉原class的值.
css类绑定2: [class.xxx]="yyy" 如果yyy(布尔值)为true的话,会添加xxx类.false不会添加
css类绑定3: [ngClass]="{ aaa:isA, bbb:isB }" aaa bbb 为类的名字,是否显示由isA isB 表达式控制.
样式绑定 [style.color]="xxx?'red':'green'" 如果xxx是true,那么会显示red,false会显示green
样式绑定2 [ngStyle]="{ 'font-style':xxx?'italic':'norma;' }" 和上面差不多,不过是一个对象的形式
事件绑定 (click)="xxx()" 点击事件会调用 xxx方法.小括号代表是事件绑定语法
双向绑定 [(ngModel)]="name" view里面html元素name变化会导致controll里面绑定的
-------------------------------------------------------------------------------------
路由声明 {path:'', component: HomeComponent} 表示根目录导航到HomeComponent组件
<router-outlet></router-outlet> 路由的组件会展示在这个标签后面
在a标签中使用路由: [routerLink]="['/']" 这个a标签会让路由path为 "" 的组件展示在上面那个标签后面.[routerLink]="['./']"是导航到子路由的书写方式
在方法中使用router.navigate(["/product"])这种方式来控制路由跳转,router对象需要写在构造函数里面
如果访问不存在的路由,那么可以用 {path: '**', component: Page404Component} 这种方法导航到一个404组件.
-------------------------------------------------------------------------------------
参数传递1 : <a href="" [routerLink]="['/product']" [queryParams]="{id: 1}"> 用queryParam属性传递参数
参数接收1 : private routerInfo: ActivatedRoute 在组件控制器函数的构造函数中定义一个ActivatedRoute 对象
然后用 this.productId = this.routerInfo.snapshot.queryParams["id"];这种方式接收
参数传递2 : 需要把route path改为 path: 'product/:id' 这种形式, 传递时用[routerLink]="['/product', 1]"
参数接收2 : 把上边的 queryParams["id"] 改为params["id"]
-------------------------------------------------------------------------------------
参数订阅 : 如果在同一个组件里面路由(从自身路由到自身),那么snapshot方式就不太合适,因为传递的参数不同的话快照是不会改变的,可以用参数订阅的方式 this.routerInfo.params.subscribe((params: Params) => this.productId = params["id"]);
重定向路由 : {path: '', redirectTo: '/home', pathMatch: 'full'}
子路由 : 在任何一个路由的对象中加上 children属性,是一个数组,里面可以定义子路由
辅助路由: 定义 <router-outlet name="aux"></router-outlet>
路由: {path: 'chat', component: ChatComponent, outlet: 'aux'}
路由链接 : <a href="" [routerLink]="[{outlets: {aux: 'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets: {aux: null}}]">结束聊天</a>
辅助路由为了处理兄弟组件之间的关系,如两个组件同时显示但是不能互相干扰.
<a [routerLink]="[{outlets: {primary: 'home', aux: 'chat'}}]">开始聊天</a> 也可以用primary显式指定点击链接之后主路由插座需要显式的组件
路由守卫 : 继承CanActivate接口,重写canActivate方法,如果返回false,那么不会展示被守卫的路由组件
路由里面加属性 canActivate: [继承CanActivate接口的类]
providers: [继承CanActivate接口的类]s
CanDeactivate 离开路由时, resolve 组件被加载过程中,同理
resolve属性里面不是数组而是对象.如resolve: {product: ProductResolve}
-------------------------------------------------------------------------------------
创建一个自定义管道 ng g pipe /pipe/xxx 使用管道 {{ xxx | yyy:'zzz' }} yyy为管道名 zzz为可选参数
