Angular
Angular Learning
冬逝夏至
这个作者很懒,什么都没留下…
展开
-
数据是数据,显示是显示
要求:原始数据中不能出现单位和%等,只能出现数字可在订阅到数据后对数据进行大小转换和字符串拼接。//数据放置在assets目录下的json文件中[{ "resource": "CPU_numbers", "threshold_value": 6, "colorType": "#ffe608"}, { "resource": "CPU_usage", "threshold_value": 0.7, "colorType": "#fdd98d"}, {原创 2020-07-24 10:30:08 · 141 阅读 · 0 评论 -
Angular 通过ip访问项目的方法
需要配置ng serve 的host参数为0.0.0.0//package.json文件下修改npm start 绑定的ng serve命令参数"scripts": { "ng": "ng", "start": "ng serve --host 0.0.0.0 --port 4200",原创 2020-07-24 08:48:17 · 884 阅读 · 0 评论 -
Angular国际化-使用ngx-translate
安装模块包npm install @ngx-translate/core --savenpm install @ngx-translate/http-loader --save在app.module.ts文件配置国际化模块import {TranslateModule, TranslateLoader} from '@ngx-translate/core';import {TranslateHttpLoader} from '@ngx-translate/http-loader';//.原创 2020-07-23 19:52:53 · 348 阅读 · 0 评论 -
Angular6 新特性
Animations库独立于核心库import from @angular/core ==> import from @angular/animations不在支持template标签,使用ng-template标签取而代之;注册Service更方便//之前import { EmaiService } from './emai。service';providers: [EmaiService],//现在@Injectable({providedIn: 'root'})expo.原创 2020-07-22 17:48:56 · 204 阅读 · 0 评论 -
Child Routes
什么是子路由?相对于某一路径开创一个独立的路由模块设置方法//在路由模块'departments/:id'路径下设置子路由,子路由下路径都是相对于该路径而设置的{ path:'departments/:id',component:DepartmentDetailComponent, children:[ {path:'overview', component:DepartmentOverviewComponent}, {path:'contact', comp原创 2020-07-22 17:14:05 · 169 阅读 · 0 评论 -
Relative Navigation
为什么要使用相对导航如果导航所依赖的绝对路径发生了改变,导航的路径也要进行相应的修改,维护起来较麻烦。而使用相对导航则方便很多。定义所谓相对导航,就是相对于已激活路由进行导航。使用方法使用relativeTo相对于当前已激活路由进行导航//相对于当前路由添加参数进行导航onSelect(department){ this.router.navigate([department.id], {relativeTo: this.aRouter}); }//相对于当前路由修改参数goP原创 2020-07-22 16:27:09 · 323 阅读 · 0 评论 -
Optional Route Parameters
可选路由参数主要用于返回上一个组件使用,就是把当前组件路由参数添加到返回后的组件路由参数上。使用步骤基于单击事件触发路由template: ` <h3>The department you picked is {{departmentId}}</h3> <button (click)='goPre()'>previous</button> <button (click)='goNext()'>next</b原创 2020-07-22 15:51:55 · 163 阅读 · 0 评论 -
paramMap Observable
为什么要使用paramMap Observable?因为angular会缓存每一个组件,如果组件已经创建过,angular不会再创建一次,因此我们需要使用paramMap Observable来订阅路由参数的变化,如果有变化就通知angular重建组件,更新参数使用步骤基于事件设置路由//模板 template: ` <h3>The department you picked is {{departmentId}}</h3> <button (cl原创 2020-07-22 14:55:34 · 109 阅读 · 0 评论 -
Angular 路由参数设置
原组件: 模板和数据绑定//模板<ul class='items'> <li (click)='onSelect(department)' *ngFor='let department of departments'> <span class='badge'>{{department.id}}</span>{{department.name}} </li></ul>//数据绑定dep.原创 2020-07-22 11:31:57 · 814 阅读 · 0 评论 -
路由和导航2
路由和导航2您访问的页面不存在组件//路径越模糊,定义顺序越靠后,全匹配放在最后{path:'**', component:PageNotFoundComponent}定义默认组件指定组件{path:'', component:DepartmentListComponent}2.重定向到指定路径(推荐){path:'', redirectTo:'/departments', pathMatch:'full'}...原创 2020-07-21 20:29:28 · 53 阅读 · 0 评论 -
Angular-路由和导航1
路由和导航要点要点index.html中的base标签定义路由的起始点<base href="/">路由模块中的routs数组定义各组件对应的路径const routes: Routes = [ {path:'departments', component:DepartmentListComponent}, {path:'employees', component:EmployeeListComponent}];在应用模块定义一个包含所有组件的数组,一次性导进原创 2020-07-21 20:00:49 · 118 阅读 · 0 评论 -
Angular-Observable
Angular-ObservableObservable(可观察对象)定义特性和应用场景特性应用场景基本用法使用HTTP获取数据Observable(可观察对象)定义可观察对象(Observable)是基于观察者模式设计的一个对象。负责维护一个依赖项(称之为观察者 Observer)的列表,并且在状态变化时自动通知它们。特性和应用场景特性可观察对象是声明式的 —— 也就是说,虽然你定义了一个用于发布值的函数,但是在有消费者订阅它之前,这个函数并不会实际执行。 订阅之后,当这个函数执行完或取消订阅原创 2020-07-21 16:37:09 · 565 阅读 · 0 评论