冬逝夏至-CSDN博客

原创数据是数据，显示是显示

要求：原始数据中不能出现单位和%等，只能出现数字可在订阅到数据后对数据进行大小转换和字符串拼接。//数据放置在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 205

原创 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 985

原创 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 425

原创 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 246

原创 Child Routes

什么是子路由？相对于某一路径开创一个独立的路由模块设置方法//在路由模块'departments/:id'路径下设置子路由，子路由下路径都是相对于该路径而设置的{ path:'departments/:id',component:DepartmentDetailComponent, children:[ {path:'overview', component:DepartmentOverviewComponent}, {path:'contact', comp

2020-07-22 17:14:05 209

原创 Relative Navigation

为什么要使用相对导航如果导航所依赖的绝对路径发生了改变，导航的路径也要进行相应的修改，维护起来较麻烦。而使用相对导航则方便很多。定义所谓相对导航，就是相对于已激活路由进行导航。使用方法使用relativeTo相对于当前已激活路由进行导航//相对于当前路由添加参数进行导航onSelect(department){ this.router.navigate([department.id], {relativeTo: this.aRouter}); }//相对于当前路由修改参数goP

2020-07-22 16:27:09 420

原创 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 224

原创 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 149

原创 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 919

原创路由和导航2

路由和导航2您访问的页面不存在组件//路径越模糊，定义顺序越靠后，全匹配放在最后{path:'**', component:PageNotFoundComponent}定义默认组件指定组件{path:'', component:DepartmentListComponent}2.重定向到指定路径（推荐）{path:'', redirectTo:'/departments', pathMatch:'full'}...

2020-07-21 20:29:28 95

原创 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 163

原创 Angular-Observable

Angular-ObservableObservable(可观察对象)定义特性和应用场景特性应用场景基本用法使用HTTP获取数据Observable(可观察对象)定义可观察对象（Observable）是基于观察者模式设计的一个对象。负责维护一个依赖项（称之为观察者 Observer）的列表，并且在状态变化时自动通知它们。特性和应用场景特性可观察对象是声明式的 —— 也就是说，虽然你定义了一个用于发布值的函数，但是在有消费者订阅它之前，这个函数并不会实际执行。订阅之后，当这个函数执行完或取消订阅

2020-07-21 16:37:09 657