环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install -g @angular/cli@1.4.9 ng new angularDemo ng -v ng set --global packageManager=cnpm npm install jquery --save npm install bootstrap --save bootstrap…

环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container: ducument.body})] usage: import { Component } from '@angular/core'; import { DialogService } from "ngx-bootstrap-modal"; @Component({ selector:…

导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <label [attr.for]="formItem.key">{{formItem.label}}</label> <div [ngSwitch]="formItem.controlType"> <input *ngSwitchCas…

使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core'; // Component transition animations export const slideInDownAnimation: AnimationEntryMetadata = trigger('routeAnimation',…

JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'; import {Observable} from 'rxjs/Observable'; @Injectable() export class JWTInterceptor implements HttpI…

路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:id', component: UserModifyComponent, resolve: {user: UserResolve}}, UserResolve: import {Injectable} from '@angular/core'; import {ActivatedRouteSnapsh…

app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Observable} from 'rxjs/Observable'; import * as _ from 'lodash'; @Compone…

app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {path: 'home', component: HomeComponent}, {path: 'login', component: LoginComponent}, {path: '**', component: Code404Component} ]; nav-bar.compoonent.ht…

app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; import {NavBarComponent} from './nav-bar/nav-bar.component'; import {FooterComponent} from '.…

form-item-control.service.ts update @Injectable() export class FormItemControlService { constructor(private formBuilder: FormBuilder) { } toFormGroup(formItems: FormItemBase<any>[]) { const group: any = {}; formItems.forEach(formItem => { group[f…