|-- project|-- .editorconfig // 用于在不同编辑器中统一代码风格|-- .gitignore // git中的忽略文件列表|-- README.md // markdown格式的说明文件|-- angular.json // angular的配置文件|-- browserslist // 用于配置浏览器兼容性的文件|-- karma.conf.js // 自动化测试框架Karma的配置文件|-- package-lock.json // 依赖包版本锁定文件|-- package.json // npm的包定义文件|-- tsconfig.app.json // 用于app项目的ts配置文件|-- tsconfig.json // 整个工作区的ts配置文件|-- tsconfig.spec.json // 用于测试的ts配置文件|-- tslint.json // ts的代码静态扫描配置|-- e2e // 自动化集成测试目录|-- src // 源代码目录 |-- src // 源代码目录|-- favicon.ico // 收藏图标|-- index.html // 单页应用到宿主HTML|-- main.ts // 入口 ts 文件|-- polyfills.ts // 用于不同浏览器的兼容脚本加载|-- styles.css // 整个项目的全局css|-- test.ts // 测试入口|-- app // 工程源码目录|-- assets // 资源目录|-- environments // 环境配置|-- environments.prod.ts // 生产环境|-- environments.ts // 开发环境

@Component({  selector: "app-xxx",  templateUrl: "XXX",  styleUrls: ["XXX"],  encapsulation:ViewEncapsulation.Emulated  // 不写则默认该值，表示该组件样式只作用于组件本身，不影响全局样式，在 head 中生成单独的 style 标签})

// 注意引入：FormsModuleimport { FormsModule } from "@angular/forms"; {{inputValue}}// 其实是一个语法糖[ngModel]="username" (ngModelChange)="username = $event"

// 父组件调用子组件的时候传入数据// 子组件引入 Input 模块import { Component, OnInit ,Input } from "@angular/core";// 子组件中 @Input 装饰器接收父组件传过来的数据export class HeaderComponent implements OnInit {  @Input() msg:stringconstructor() { }ngOnInit() { }}// 子组件中使用父组件的数据
这是头部组件--{{msg}}

// 子组件引入 Output 和 EventEmitterimport { Component,OnInit,Input,Output,EventEmitter} from "@angular/core";// 子组件中实例化 EventEmitter// 用 EventEmitter 和 @Output 装饰器配合使用  指定类型变量@Output() private outer=new EventEmitter();// 子组件通过 EventEmitter 对象 outer 实例广播数据sendParent(){  this.outer.emit("msg from child")}// 父组件调用子组件的时候，定义接收事件，outer 就是子组件的 EventEmitter 对象 outer// 父组件接收到数据会调用自己的 runParent, 这个时候就能拿到子组件的数据// 接收子组件传递过来的数据  runParent(msg:string){   alert(msg);}

// 给子组件定义一个名称// 引入 ViewChildimport { Component, OnInit ,ViewChild} from "@angular/core";// ViewChild 和子组件关联起来@ViewChild("footerChild") footer;// 调用子组件run(){   this.footer.footerRun();}

// 表现形式： 

  这是一个 div

你好 ngStyle

// 注意引入：FormsModuleimport { FormsModule } from "@angular/forms"; {{inputValue}}

这是 ngIF 判断是否显示

这是 ngIF 内容
  
这是 else 内容// 结构性指令都依赖于 ng-template，*ngIf 实际上就是 ng-template 指令的 [ngIf] 属性。

  
     {{item}} --{{i}}  

   
已支付
   
已确认
   
已发货
   
已失效

@HostBinding("style.display") display = "grid";// 用样式绑定代替rd2的 this.setStyle("display","grid");

@HostListener("click",["$event.target"])// 第一个参数是事件名，第二个是事件携带参数

/** * 在功能模块中定义子路由后，只要导入该模块，等同于在根路由中直接定义 * 也就是说在 AppModule 中导入 HomeModule 的时候， * 由于 HomeModule 中导入了 HomeRouting Module * 在 HomeRoutingModule 中定义的路由会合并到根路由表 * 相当于直接在根模块中定义下面的数组。 * const routes = [{ *   path: "home", *   component: HomeContainerComponent * }] */const routes: Routes = [  {path: "home", component: HomeComponent},  {path: "news", component: NewsComponent},  {path: "newscontent/:id", component: NewscontentComponent},  // 配置动态路由  {    path: "",    redirectTo: "/home",  // 重定向    pathMatch: "full"},  //匹配不到路由的时候加载的组件 或者跳转的路由  {     path: "**", /*任意的路由*/     // component:HomeComponent     redirectTo:"home"  }]@NgModule({  /**   * 根路由使用 `RouterModule.forRoot(routes)` 形式。   * 而功能模块中的路由模块使用 `outerModule.forChild(routes)` 形式。   * 启用路由的 debug 跟踪模式，需要在根模块中设置 `enableTracing: true`   */  imports: [RouterModule.forRoot(routes, { enableTracing: true })],  exports: [RouterModule]})export class AppRoutingModule { }

  首页  首页  首页   首页 
  

    首页    新闻
   首页   新闻
.active{   color:red;}

this.route.paramsMap.subscribe(params => {...})

this.route.queryParamsMap.subscribe(params => {...})

constructor(private routerInfo: ActivatedRoute){}ngOnInit(){this.routerInfo.snapshot.params["id"]}

constructor(private routerInfo: ActivatedRoute){}ngOnInit(){this.routerInfo.snapshot.params["id"]this.routerInfo.snapshot.params["name"]}

const routes: Routes = [    {path:"user",loadChildren:"./module/user/user.module#UserModule" },    {path:"product",loadChildren:"./module/product/product.module#ProductModule"},    {path:"article",loadChildren:"./module/article/article.module#ArticleModule"},    {path:"**",redirectTo:"user"}];// 上面好像会报错 Error find module // 配置懒加载const routes: Routes = [    {path:"user",loadChildren:()=>import("./module/user/user.module").then(mod=>mod.UserModule)},    {path:"article",loadChildren:()=>import("./module/article/article.module").then(mod=>mod.ArticleModule)},    {path:"product",loadChildren:()=>import("./module/product/product.module").then(mod=>mod.ProductModule)},    {path:"**",redirectTo:"user"}];

import { Injectable } from "@angular/core";@Injectable({  providedIn: "root",})export class HeroService {  aa = "abc";  constructor(){ }  ngOnInit(){ }}import { HeroService } from "../../../services/hero/hero.service";export class AComponent implements OnInit{  constructor(private heroService : HeroService) {} //实例化  ngOnInit(){    console.log(this.heroService.aa)  }}

constructor(private heroService : HeroService) {} // 依赖注入

// 首先写 @injectable 我们需要注入的东西，比如说 product@Injectable()class Product {  constructor(    private name: string,    private color: string,    private price: number,  ) { }}class PurchaseOrder {  constructor(private product: Product){ }} export class HomeGrandComponent implements OnInit {  constructor() { }  ngOnInit() {    // 构造一个 injector 用 create 方法 里面 providers 数组中写我们需要构造的东西    const injector = Injector.create({      providers: [        {          provide: Product,          // 构造 Product 在 useFactory 中就会把上面定义的 product 注入到这里          useFactory: () => {            return new Product("大米手机", "黑色", 2999);          },          deps: []        },        {          provide: PurchaseOrder,          deps: [Product]        },        {          provide: token,          useValue: { baseUrl: "http://local.dev" }        }      ]    });     console.log("injector获取product", injector.get(PurchaseOrder).getProduct);    console.log(injector.get(token));  }

// .service.ts 中 @Injectable () 依赖注入@Injectable()export class HomeService {  imageSliders: ImageSlider[] = [    {      imgUrl:"",      link: "",      caption: ""    }  ]  getBanners() {    return this.imageSliders;  }}// 使用模块对应的.module.ts 中@NgModule({  declarations: [    HomeDetailComponent,  ],  providers:[HomeService], // 在 providers 直接写对应服务，直接将服务注入模块  imports: [SharedModule, HomeRoutingModule]})

{{ "Angular" | uppercase }}
  
{{ data | date:"yyyy-MM-dd" }}
  
{{ { name: "ccc" } | json }}
  
{{ "ccc" | slice:0:1 | uppercase }}

// 引入PipeTransform是为了继承transform方法import { Pipe, PipeTransform } form "@angular/core"; // name属性值惯用小驼峰写法, name的值为html中 | 后面的名称@Pipe({ name: "sexReform" }) export class SexReformPipe implements PipeTransform {    transform(value: string, args?: any): string {    // value的值为html中 | 前面传入的值， args为名称后传入的参数        switch(value){            case "male": return "男";            case "female": return "女";            default: return "雌雄同体";        }     }}// demo.component.tsexport Class DemoComponent {    sexValue = "female";}// demo.component.html{{ sexValue | sexReform }}// 浏览器输出女// 管道可以链式使用，还可以传参 {{date | date: "fullDate" | uppercase}} // 每一个自定义管道都需要实现 PipeTransform 接口，这个接口非常简单，只需要实现 transform 方法即可。// transform()方法参数格式 - transform(value: string, args1: any, args2?: any): // value为传入的值（即为需要用此管道处理的值， | 前面的值）; // args 为传入的参数(?:代表可选)；// html 中使用管道格式 - {{ 数据 | 管道名 : 参数1 : 参数2 }}// 与 component 一样,pipe 需要先在 declarations 数组中声明后使用

ngAfterViewInit(){   var boxDom:any=document.getElementById("box");   boxDom.style.color="red";}

class ElementRef {  constructor(nativeElement: T)  nativeElement: T  //背后的原生元素，如果不支持直接访问原生元素，则为 null（比如：在 Web Worker 环境下运行此应用的时候）。}

// 模版中给 DOM 起一个引用名字，以便可以在组件类或模版中进行引用 
// 引入 ViewChildimport { ViewChild,ElementRef } from "@angular/core";// 用 ViewChild 绑定 DOM@ViewChild("myattr") myattr: ElementRef;// 在 ngAfterViewInit 生命周期函数里可以很安全的获取 ViewChild 引用的 DOMngAfterViewInit(){   let attrEl = this.myattr.nativeElement;}

// 给子组件定义一个名称// 引入 ViewChildimport { Component, OnInit ,ViewChild} from "@angular/core";// ViewChild 和子组件关联起来 // 如果想引用模版中的 Angular 组件，ViewChild 中可以使用引用名，也可以使用组件类型@ViewChild("footerChild") footer;// @ViewChild("imageSlider", { static: true }) // static指定是动态还是静态，在*ngFor或者*ngIf中是动态，否则即为静态，动态为 true// 调用子组件run(){   this.footer.footerRun();}

// 使用 ViewChildren 引用获取@ViewChildren（’img‘）;// 使用类型引用获取imgs: QueryList;

import { Directive, Renderer2, ElementRef, OnInit } from "@angular/core";@Directive({    selector: "[testRenderer2]"})export class TestRenderer2Directive implements OnInit {    constructor(private renderer: Renderer2, private el: ElementRef) {} // 实例化    ngOnInit() {    this.renderer.addClass(this.el.nativeElement, "test-renderer2");    // this.renderer.removeClass(this.el.nativeElement, "old-class");    }}

import { Directive, Renderer2, ElementRef, OnInit } from "@angular/core";constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {    const div = this.renderer.createElement("div");    const text = this.renderer.createText("Hello world!");        this.renderer.appendChild(div, text);    this.renderer.appendChild(this.el.nativeElement, div);}

import { Directive, Renderer2, ElementRef, OnInit } from "@angular/core";constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {    this.renderer.setAttribute(this.el.nativeElement, "aria-hidden", "true");}

import { Directive, Renderer2, ElementRef, OnInit } from "@angular/core";constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {    this.renderer.setStyle(        this.el.nativeElement,        "border-left",        "2px dashed olive"    );}

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {    this.renderer.removeStyle(this.el.nativeElement, "border-left");}

constructor(private renderer: Renderer2, private el: ElementRef) {}ngOnInit() {    this.renderer.setProperty(this.el.nativeElement, "alt", "Cute alligator");}

import {  Component,  OnInit,  Renderer2,  ViewChild,} from "@angular/core";import { AboxItemComponent } from "./abox-item/abox-item.component"; @Component({  selector: "app-abox",  templateUrl: "./abox.component.html",  styleUrls: ["./abox.component.less"],})export class AboxComponent implements OnInit {  private container;  activeIndex: number;  @ViewChild("containers") containers: any;  constructor(private rd2: Renderer2) {}   ngOnInit(): void {}   ngAfterViewInit(): void {    this.container = this.containers.nativeElement;    this.initCarouselWidth();  }      initCarouselWidth() {    this.rd2.setStyle(this.container, "width", "100px");  }}

// 在 app.module.ts 中引入 HttpClientModule 并注入import {HttpClientModule} from "@angular/common/http";imports: [  BrowserModule,  HttpClientModule]// 在用到的地方引入 HttpClient 并在构造函数声明import {HttpClient} from "@angular/common/http";constructor(private http: HttpClient,private cd: ChangeDetectorRef) { } // 依赖注入// get 请求数据var api = "http://baidu.com/api/productlist";this.http.get(api).subscribe(response => {  console.log(response);  this.cd.markForCheck()；  // 如果改变了脏值检测的变更原则 changeDetection: ChangeDetectionStrategy.OnPush  // 则需要使用 this.cd.markForCheck() 手动提醒 Angular 这里需要进行脏值检测});

// 在 app.module.ts 中引入 HttpClientModule 并注入import {HttpClientModule} from "@angular/common/http";imports: [   BrowserModule,   HttpClientModule]// 在用到的地方引入 HttpClient 、HttpHeaders 并在构造函数声明 HttpClientimport {HttpClient,HttpHeaders} from "@angular/common/http";constructor(private http:HttpClient) { } // 实例化// post 提交数据const httpOptions = {    headers: new HttpHeaders({ "Content-Type": "application/json" })};var api = "http://127.0.0.1:4200/doLogin";this.http.post(api,{username:"瑞萌萌",age:"22"},httpOptions).subscribe(response => {console.log(response);});

// 在 app.module.ts 中引入 HttpClientModule、HttpClientJsonpModule 并注入import {HttpClientModule,HttpClientJsonpModule} from"@angular/common/http";imports: [   BrowserModule,   HttpClientModule,   HttpClientJsonpModule]// 在用到的地方引入 HttpClient 并在构造函数声明import {HttpClient} from "@angular/common/http";constructor(private http:HttpClient) { } // 实例化// jsonp 请求数据var api = "http://baidu.com/api/productlist";this.http.jsonp(api,"callback").subscribe(response => {   console.log(response);});

// 使用命令 ng g interceptor name，在这里创建拦截器 ng g interceptor LanJieQi// cli 生成拦截器是没有简写方式的import { Injectable } from "@angular/core";import {  HttpRequest,  HttpHandler,  HttpEvent,  HttpInterceptor} from "@angular/common/http";import { Observable } from "rxjs";@Injectable()export class LanJieQiInterceptor implements HttpInterceptor {  constructor() {}  // 默认的 intercept() 方法只是单纯的将请求转发给下一个拦截器（如果有），并最终返回 HTTP 响应体的 Observable  // request: HttpRequest 表示请求对象，包含了请求相关的所有信息,unknown指定请求体body的类型  // next: HttpHandler 请求对象修改完成，将修改后的请求对象通过next中的handle方法传回真正发送请求的方法中  intercept(request: HttpRequest, next: HttpHandler): Observable> {    // next 对象表示拦截器链表中的下一个拦截器（在应用中可以设置多个拦截器）    return next.handle(request);  }}

// 在 @NgModule 模块中注入拦截器// 拦截器也是一个由 Angular 依赖注入 (DI) 系统管理的服务，也必须先提供这个拦截器类，才能使用它// 由于拦截器是 HttpClient 服务的依赖，所以必须在提供 HttpClient 的同一个（或其各级父注入器）注入器中提供这些拦截器@NgModule({  imports: [    HttpClientModule    // others...  ],  providers: [    {      provide: HTTP_INTERCEPTORS,      useClass: LanJieQiInterceptor,      // multi: true 表明 HTTP_INTERCEPTORS 是一个多重提供者的令牌，表示这个令牌可以注入多个拦截器      multi: true    },  ],  bootstrap: [AppComponent]})export class AppModule { }

@Injectable()export class LanJieQiInterceptor implements HttpInterceptor {  constructor() {}  intercept(request: HttpRequest, next: HttpHandler): Observable> {    // 为了统一设置请求头，需要修改请求    // 但 HttpRequest 和 HttpResponse 实例的属性却是只读（readonly）的    // 所以修改前需要先 clone 一份，修改这个克隆体后再把它传给 next.handle()    let req = request.clone({    setHeaders:{      token:"123456" // 在请求头中增加 token：123456    }// setHeaders 和 headers: request.headers.set("token", "123456") 一致  })  return next.handle(req)// 将修改后的请求返回给应用  }}

@Injectable()export class LanJieQiInterceptor implements HttpInterceptor {  constructor() {}  intercept(request: HttpRequest, next: HttpHandler): Observable> {    // 为了统一设置请求头，需要修改请求    // 但 HttpRequest 和 HttpResponse 实例的属性却是只读（readonly）的    // 所以修改前需要先 clone 一份，修改这个克隆体后再把它传给 next.handle()    let req = request.clone({    setHeaders:{      token:"123456" // 在请求头中增加 token：123456    }// setHeaders 和 headers: request.headers.set("token", "123456") 一致  })  return next.handle(req)// 将修改后的请求返回给应用  }}

// 先在 NgModule 中导入了 FormsModule 表单库// FormsModule 为我们提供了一些模板驱动的指令，例如：ngModel、NgFormimport {   FormsModule} from "@angular/forms"; @NgModule({   declarations: [     FormsDemoApp,     DemoFormSku,     // ... our declarations here   ],   imports: [     BrowserModule,     FormsModule,  ],   bootstrap: [ FormsDemoApp ] }) class FormsDemoAppModule {}

      
基础表单:商品名称
      
        
          商品名称:                  
        提交      
    

// 先在 NgModule 中导入了 ReactiveFormsModule 表单库import {   ReactiveFormsModule } from "@angular/forms"; @NgModule({  imports: [    FormsModule,    ReactiveFormsModule  ]}) // 使用 formGroup 和 formControl 指令来构建这个组件，需要导入相应的类import {   FormBuilder,   FormGroup,  ReactiveFormsModule} from "@angular/forms"; // 在组件类上注入一个从 FormBuilder 类创建的对象实例，并把它赋值给 fb 变量（来自构造函数）export class DemoFormSkuBuilder {   myForm: FormGroup;  // myForm 是 FormGroup 类型  constructor(fb: FormBuilder) {     // FormBuilder 中的 group 方法用于创建一个新的 FormGroup    // group 方法的参数是代表组内各个 FormControl 的键值对    this.myForm = fb.group({  // 调用 fb.group () 来创建 FormGroup      // 设置一个名为 sku 的控件，控件的默认值为 "123456"      "sku": ["123456"]     });   }  onSubmit(value: string): void {     console.log("submit value:", value);   } }

Demo Form: Sku with Builder
 SKU    

const control = new FormControl("name", Validators.required);// 在组件定义类中使用 FormBuilder  constructor(fb: FormBuilder) {     this.myForm = fb.group({       "name": ["",Validators.required]     });     this.name = this.myForm.controls["name"];   }

template:`
      
商品表单:商品名称
              
          商品名称：                    
            名称无效          
          
            名称不是以“123”开头          
          
            数据已变动          
        
        
          商品料号：                    
            该项必填          
          
            只可输入数字和英文          
        
        
          表单无效        
        
          表单有效        
        提交          
`export class NonInWarehouseComponent implements OnInit {  myForm: FormGroup;  name: AbstractControl;  constructor(fb: FormBuilder) {    this.myForm = fb.group({      name: ["牛奶", Validators.compose([Validators.required, textValidator])],      code: ["", [Validators.required, Validators.pattern("^[A-Za-z0-9]*$")]],    });    this.name = this.myForm.controls.name;  }  ngOnInit() {    const nameControl = new FormControl("nate");    console.log("nameControl", nameControl);  }  onSubmit(a: any) {    console.log("a", a);  }}

// angular 源代码中实现 Validators.required export class Validators {  // 接收一个 AbstractControl 对象作为输入static required(control: AbstractControl): ValidationErrors | null;}// 当验证器失败时，会返回一个 String Map 对象，他的键是” 错误代码 “，它的值是 trueexport declare type ValidationErrors = {    [key: string]: any;};// 自定义验证器function textValidator(  controls: FormControl // 因为FormControl继承于 AbstractControl 所以也可以写成FormControl对象): {  [s: string]: boolean;} {  if (!controls.value.match(/^123/)) {    return { textinvalid: true };  }}

Validators.compose([Validators.required, textValidator])// 不用compose   [Validators.required, textValidator]// 保留 compose 是为了向以前历史版本进行兼容，不用 compose 也可实现

export class ReativeFormsComponent implements OnInit {  ngOnInit() {    this.addContact()  }  //动态表单  personMess: FormGroup = new FormGroup({    //生成动态表单数组    contacts: new FormArray([])   })  //获取数组对象  get contacts(){    return this.personMess.get("contacts") as FormArray  }  //增加一个表单组  addContact(){    let myContact = new FormGroup({      name: new FormControl(),      phone: new FormControl()    })    this.contacts.push(myContact)  }   //删除一个表单组  deleteContact(i:number){    this.contacts.removeAt(i)  }  //提交表单  OnSubmit() {    console.log(this.personMess.value)  }}

  
        
                  删除信息    
  
  添加信息