|-- project 	|-- .editorconfig // 用于在不同編輯器中統(tǒng)一代碼風(fēng)格 	|-- .gitignore // git中的忽略文件列表 	|-- README.md // markdown格式的說(shuō)明文件 	|-- angular.json // angular的配置文件 	|-- browserslist // 用于配置瀏覽器兼容性的文件 	|-- karma.conf.js // 自動(dòng)化測(cè)試框架Karma的配置文件 	|-- package-lock.json // 依賴(lài)包版本鎖定文件 	|-- package.json // npm的包定義文件 	|-- tsconfig.app.json // 用于app項(xiàng)目的ts配置文件 	|-- tsconfig.json // 整個(gè)工作區(qū)的ts配置文件 	|-- tsconfig.spec.json // 用于測(cè)試的ts配置文件 	|-- tslint.json // ts的代碼靜態(tài)掃描配置 	|-- e2e // 自動(dòng)化集成測(cè)試目錄 	|-- src // 源代碼目錄   |-- src // 源代碼目錄 	|-- favicon.ico // 收藏圖標(biāo) 	|-- index.html // 單頁(yè)應(yīng)用到宿主HTML 	|-- main.ts // 入口 ts 文件 	|-- polyfills.ts // 用于不同瀏覽器的兼容腳本加載 	|-- styles.css // 整個(gè)項(xiàng)目的全局css 	|-- test.ts // 測(cè)試入口 	|-- app // 工程源碼目錄 	|-- assets // 資源目錄 	|-- environments // 環(huán)境配置 		|-- environments.prod.ts // 生產(chǎn)環(huán)境 		|-- environments.ts // 開(kāi)發(fā)環(huán)境

@Component({   selector: 'app-xxx',   templateUrl: 'XXX',   styleUrls: ['XXX'],   encapsulation:ViewEncapsulation.Emulated  // 不寫(xiě)則默認(rèn)該值，表示該組件樣式只作用于組件本身，不影響全局樣式，在 head 中生成單獨(dú)的 style 標(biāo)簽 })

// 父組件調(diào)用子組件的時(shí)候傳入數(shù)據(jù) <app-header [msg]="msg"></app-header>  // 子組件引入 Input 模塊 import { Component, OnInit ,Input } from '@angular/core';  // 子組件中 @Input 裝飾器接收父組件傳過(guò)來(lái)的數(shù)據(jù) export class HeaderComponent implements OnInit {   @Input() msg:string 	constructor() { } 	ngOnInit() { } }  // 子組件中使用父組件的數(shù)據(jù) <h2>這是頭部組件--{{msg}}</h2>

// 子組件引入 Output 和 EventEmitter import { Component,OnInit,Input,Output,EventEmitter} from '@angular/core';  // 子組件中實(shí)例化 EventEmitter // 用 EventEmitter 和 @Output 裝飾器配合使用 <string> 指定類(lèi)型變量 @Output() private outer=new EventEmitter<string>();  // 子組件通過(guò) EventEmitter 對(duì)象 outer 實(shí)例廣播數(shù)據(jù) sendParent(){   this.outer.emit('msg from child') }  // 父組件調(diào)用子組件的時(shí)候，定義接收事件，outer 就是子組件的 EventEmitter 對(duì)象 outer <app-header (outer)="runParent($event)"></app-header>  // 父組件接收到數(shù)據(jù)會(huì)調(diào)用自己的 runParent, 這個(gè)時(shí)候就能拿到子組件的數(shù)據(jù) // 接收子組件傳遞過(guò)來(lái)的數(shù)據(jù)   runParent(msg:string){    alert(msg); }

// 給子組件定義一個(gè)名稱(chēng) <app-footer #footerChild></app-footer>  // 引入 ViewChild import { Component, OnInit ,ViewChild} from '@angular/core';  // ViewChild 和子組件關(guān)聯(lián)起來(lái) @ViewChild('footerChild') footer;  // 調(diào)用子組件 run(){    this.footer.footerRun(); }

// 表現(xiàn)形式： <ng-content select="樣式類(lèi)/HTML標(biāo)簽/指令"></ng-content>  <ng-content select="[appGridItem]"></ng-content>

<div [ngClass]="{'red': true, 'blue': false}">   這是一個(gè) div </div>

<div [ngStyle]="{'background-color':'green'}">你好 ngStyle</div>

// 注意引入：FormsModule import { FormsModule } from '@angular/forms';  <input type="text" [(ngModel)]="inputValue"/> {{inputValue}}

<p *ngIf="list.length > 3">這是 ngIF 判斷是否顯示</p>

<div *ngIf="show else ElseContent">這是 ngIF 內(nèi)容</div> <ng-template #ElseContent>   <h2>這是 else 內(nèi)容</h2> </ng-template>  // 結(jié)構(gòu)性指令都依賴(lài)于 ng-template，*ngIf 實(shí)際上就是 ng-template 指令的 [ngIf] 屬性。

<ul>   <li *ngFor="let item of list;let i = index;">      {{item}} --{{i}}   </li> </ul>

<ul [ngSwitch]="score">    <li *ngSwitchCase="1">已支付</li>    <li *ngSwitchCase="2">已確認(rèn)</li>    <li *ngSwitchCase="3">已發(fā)貨</li>    <li *ngSwitchDefault>已失效</li> </ul>

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

@HostListener('click',['$event.target'])  // 第一個(gè)參數(shù)是事件名，第二個(gè)是事件攜帶參數(shù)

/**  * 在功能模塊中定義子路由后，只要導(dǎo)入該模塊，等同于在根路由中直接定義  * 也就是說(shuō)在 AppModule 中導(dǎo)入 HomeModule 的時(shí)候，  * 由于 HomeModule 中導(dǎo)入了 HomeRouting Module  * 在 HomeRoutingModule 中定義的路由會(huì)合并到根路由表  * 相當(dāng)于直接在根模塊中定義下面的數(shù)組。  * const routes = [{  *   path: 'home',  *   component: HomeContainerComponent  * }]  */  const routes: Routes = [   {path: 'home', component: HomeComponent},   {path: 'news', component: NewsComponent},   {path: 'newscontent/:id', component: NewscontentComponent},  // 配置動(dòng)態(tài)路由   {     path: '',     redirectTo: '/home',  // 重定向     pathMatch: 'full' 	},   //匹配不到路由的時(shí)候加載的組件 或者跳轉(zhuǎn)的路由   {      path: '**', /*任意的路由*/      // component:HomeComponent      redirectTo:'home'   } ]  @NgModule({   /**    * 根路由使用 `RouterModule.forRoot(routes)` 形式。    * 而功能模塊中的路由模塊使用 `outerModule.forChild(routes)` 形式。    * 啟用路由的 debug 跟蹤模式，需要在根模塊中設(shè)置 `enableTracing: true`    */   imports: [RouterModule.forRoot(routes, { enableTracing: true })],   exports: [RouterModule] }) export class AppRoutingModule { }

<h1>   <a [routerLink]="['/home']">首頁(yè)</a>   <a [routerLink]="['/home',tab.link]">首頁(yè)</a><!-- 路徑參數(shù) -->   <a [routerLink]="['/home',tab.link,{name:'val1'}]">首頁(yè)</a> <!-- 路徑對(duì)象參數(shù) -->   <a [routerLink]="['/home']" [queryParams]="{name:'val1'}">首頁(yè)</a> <!-- 查詢(xún)參數(shù) --> </h1> <router-outlet></router-outlet>  <!-- 路由插座，占位標(biāo)簽 --> <!--   路由顯示的內(nèi)容是插入到 router-outlet 的同級(jí)的下方節(jié)點(diǎn)   而不是在 router-outlet 中包含 --> <!--   當(dāng)事件處理或者達(dá)到某個(gè)條件時(shí)，可以使用手動(dòng)跳轉(zhuǎn) 	this.router.navigate(['home']);  	this.router.navigate(['home',tab.link]);  	this.router.navigate(['home',tab.link，{name:'val1'}]);  	this.router.navigate(['home'],{queryParams:{name:'val1'}});  -->

<h1>     <a routerLink="/home" routerLinkActive="active">首頁(yè)</a>     <a routerLink="/news" routerLinkActive="active">新聞</a> </h1>  <h1>    <a [routerLink]="[ '/home' ]" routerLinkActive="active">首頁(yè)</a>    <a [routerLink]="[ '/news' ]" routerLinkActive="active">新聞</a> </h1>  .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'} ];  // 上面好像會(huì)報(bào)錯(cuò) 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) {} //實(shí)例化   ngOnInit(){     console.log(this.heroService.aa)   } }

  constructor(private heroService : HeroService) {} // 依賴(lài)注入

// 首先寫(xiě) @injectable 我們需要注入的東西，比如說(shuō) 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() {     // 構(gòu)造一個(gè) injector 用 create 方法 里面 providers 數(shù)組中寫(xiě)我們需要構(gòu)造的東西     const injector = Injector.create({       providers: [         {           provide: Product,           // 構(gòu)造 Product 在 useFactory 中就會(huì)把上面定義的 product 注入到這里           useFactory: () => {             return new Product('大米手機(jī)', '黑色', 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 () 依賴(lài)注入 @Injectable() export class HomeService {   imageSliders: ImageSlider[] = [     {       imgUrl:'',       link: '',       caption: ''     }   ]   getBanners() {     return this.imageSliders;   } }  // 使用模塊對(duì)應(yīng)的.module.ts 中 @NgModule({   declarations: [     HomeDetailComponent,   ],   providers:[HomeService], // 在 providers 直接寫(xiě)對(duì)應(yīng)服務(wù)，直接將服務(wù)注入模塊   imports: [SharedModule, HomeRoutingModule] })

<div>{{ 'Angular' | uppercase }}</div>  <!-- Output: ANGULAR -->  <div>{{ data | date:'yyyy-MM-dd' }}</div>  <!-- Output: 2022-05-17 -->  <div>{{ { name: 'ccc' } | json }}</div>  <!-- Output: { "name": "ccc" } -->  <!--  	管道可以接收任意數(shù)量的參數(shù)，使用方式是在管道名稱(chēng)后面添加: 和參數(shù)值 	若需要傳遞多個(gè)參數(shù)則參數(shù)之間用冒號(hào)隔開(kāi)  -->  <!-- 可以將多個(gè)管道連接在一起，組成管道鏈對(duì)數(shù)據(jù)進(jìn)行處理 --> <div>{{ 'ccc' | slice:0:1 | uppercase }}</div>

// 引入PipeTransform是為了繼承transform方法 import { Pipe, PipeTransform } form '@angular/core';  // name屬性值慣用小駝峰寫(xiě)法, name的值為html中 | 后面的名稱(chēng) @Pipe({ name: 'sexReform' })  export class SexReformPipe implements PipeTransform {     transform(value: string, args?: any): string {     // value的值為html中 | 前面?zhèn)魅氲闹担?args為名稱(chēng)后傳入的參數(shù)         switch(value){             case 'male': return '男';             case 'female': return '女';             default: return '雌雄同體';         }      } }  // demo.component.ts export Class DemoComponent {     sexValue = 'female'; }  // demo.component.html <span>{{ sexValue | sexReform }}</span>  // 瀏覽器輸出 女  // 管道可以鏈?zhǔn)绞褂茫€可以傳參 <span> {{date | date: 'fullDate' | uppercase}} </span> // 每一個(gè)自定義管道都需要實(shí)現(xiàn) PipeTransform 接口，這個(gè)接口非常簡(jiǎn)單，只需要實(shí)現(xiàn) transform 方法即可。 // transform()方法參數(shù)格式 - transform(value: string, args1: any, args2?: any):  // value為傳入的值（即為需要用此管道處理的值， | 前面的值）;  // args 為傳入的參數(shù)(?:代表可選)； // html 中使用管道格式 - {{ 數(shù)據(jù) | 管道名 : 參數(shù)1 : 參數(shù)2 }} // 與 component 一樣,pipe 需要先在 declarations 數(shù)組中聲明后使用

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

class ElementRef<T> {   constructor(nativeElement: T)   nativeElement: T  //背后的原生元素，如果不支持直接訪問(wèn)原生元素，則為 null（比如：在 Web Worker 環(huán)境下運(yùn)行此應(yīng)用的時(shí)候）。 }

// 模版中給 DOM 起一個(gè)引用名字，以便可以在組件類(lèi)或模版中進(jìn)行引用 <div #myattr></div>  // 引入 ViewChild import { ViewChild,ElementRef } from '@angular/core';  // 用 ViewChild 綁定 DOM	 @ViewChild('myattr') myattr: ElementRef;  // 在 ngAfterViewInit 生命周期函數(shù)里可以很安全的獲取 ViewChild 引用的 DOM ngAfterViewInit(){    let attrEl = this.myattr.nativeElement; }

// 給子組件定義一個(gè)名稱(chēng) <app-footer #footerChild></app-footer>  // 引入 ViewChild import { Component, OnInit ,ViewChild} from '@angular/core';  // ViewChild 和子組件關(guān)聯(lián)起來(lái)  // 如果想引用模版中的 Angular 組件，ViewChild 中可以使用引用名，也可以使用組件類(lèi)型 @ViewChild('footerChild') footer;  // @ViewChild('imageSlider', { static: true }) // static指定是動(dòng)態(tài)還是靜態(tài)，在*ngFor或者*ngIf中是動(dòng)態(tài)，否則即為靜態(tài)，動(dòng)態(tài)為 true  // 調(diào)用子組件 run(){    this.footer.footerRun(); }

<img   #img   *ngFor="let slider of sliders"   [src]="slider.imgUrl"   [alt]="slider.capiton" >  // 使用 ViewChildren 引用獲取 @ViewChildren（’img‘）;  // 使用類(lèi)型引用獲取 imgs: QueryList<ElementRef>;

import { Directive, Renderer2, ElementRef, OnInit } from '@angular/core';  @Directive({     selector: '[testRenderer2]' })  export class TestRenderer2Directive implements OnInit {     constructor(private renderer: Renderer2, private el: ElementRef) {} // 實(shí)例化      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 并在構(gòu)造函數(shù)聲明 import {HttpClient} from "@angular/common/http"; constructor(private http: HttpClient,private cd: ChangeDetectorRef) { } // 依賴(lài)注入  // get 請(qǐng)求數(shù)據(jù) var api = "http://baidu.com/api/productlist"; this.http.get(api).subscribe(response => {   console.log(response);   this.cd.markForCheck()；   // 如果改變了臟值檢測(cè)的變更原則 changeDetection: ChangeDetectionStrategy.OnPush   // 則需要使用 this.cd.markForCheck() 手動(dòng)提醒 Angular 這里需要進(jìn)行臟值檢測(cè) });

// 在 app.module.ts 中引入 HttpClientModule 并注入 import {HttpClientModule} from '@angular/common/http'; imports: [    BrowserModule,    HttpClientModule ]  // 在用到的地方引入 HttpClient 、HttpHeaders 并在構(gòu)造函數(shù)聲明 HttpClient import {HttpClient,HttpHeaders} from "@angular/common/http"; constructor(private http:HttpClient) { } // 實(shí)例化  // post 提交數(shù)據(jù) 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 并在構(gòu)造函數(shù)聲明 import {HttpClient} from "@angular/common/http"; constructor(private http:HttpClient) { } // 實(shí)例化  // jsonp 請(qǐng)求數(shù)據(jù) var api = "http://baidu.com/api/productlist"; this.http.jsonp(api,'callback').subscribe(response => {    console.log(response); });

// 使用命令 ng g interceptor name，在這里創(chuàng)建攔截器 ng g interceptor LanJieQi // cli 生成攔截器是沒(méi)有簡(jiǎn)寫(xiě)方式的  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() {}   // 默認(rèn)的 intercept() 方法只是單純的將請(qǐng)求轉(zhuǎn)發(fā)給下一個(gè)攔截器（如果有），并最終返回 HTTP 響應(yīng)體的 Observable   // request: HttpRequest<unknown> 表示請(qǐng)求對(duì)象，包含了請(qǐng)求相關(guān)的所有信息,unknown指定請(qǐng)求體body的類(lèi)型   // next: HttpHandler 請(qǐng)求對(duì)象修改完成，將修改后的請(qǐng)求對(duì)象通過(guò)next中的handle方法傳回真正發(fā)送請(qǐng)求的方法中   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> 	{     // next 對(duì)象表示攔截器鏈表中的下一個(gè)攔截器（在應(yīng)用中可以設(shè)置多個(gè)攔截器）     return next.handle(request);   } }

// 在 @NgModule 模塊中注入攔截器 // 攔截器也是一個(gè)由 Angular 依賴(lài)注入 (DI) 系統(tǒng)管理的服務(wù)，也必須先提供這個(gè)攔截器類(lèi)，才能使用它 // 由于攔截器是 HttpClient 服務(wù)的依賴(lài)，所以必須在提供 HttpClient 的同一個(gè)（或其各級(jí)父注入器）注入器中提供這些攔截器 @NgModule({   imports: [     HttpClientModule     // others...   ],   providers: [     {       provide: HTTP_INTERCEPTORS,       useClass: LanJieQiInterceptor,       // multi: true 表明 HTTP_INTERCEPTORS 是一個(gè)多重提供者的令牌，表示這個(gè)令牌可以注入多個(gè)攔截器       multi: true     },   ],   bootstrap: [AppComponent] })  export class AppModule { }

@Injectable()export class LanJieQiInterceptor implements HttpInterceptor {   constructor() {}   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> 	{     // 為了統(tǒng)一設(shè)置請(qǐng)求頭，需要修改請(qǐng)求     // 但 HttpRequest 和 HttpResponse 實(shí)例的屬性卻是只讀（readonly）的     // 所以修改前需要先 clone 一份，修改這個(gè)克隆體后再把它傳給 next.handle()     let req = request.clone({     	setHeaders:{       	token:"123456" // 在請(qǐng)求頭中增加 token：123456     	} 			// setHeaders 和 headers: request.headers.set('token', '123456') 一致   	})   	return next.handle(req)// 將修改后的請(qǐng)求返回給應(yīng)用   }}

@Injectable() export class LanJieQiInterceptor implements HttpInterceptor {   constructor() {}   intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> 	{     // 為了統(tǒng)一設(shè)置請(qǐng)求頭，需要修改請(qǐng)求     // 但 HttpRequest 和 HttpResponse 實(shí)例的屬性卻是只讀（readonly）的     // 所以修改前需要先 clone 一份，修改這個(gè)克隆體后再把它傳給 next.handle()     let req = request.clone({     	setHeaders:{       	token:"123456" // 在請(qǐng)求頭中增加 token：123456     	} 			// setHeaders 和 headers: request.headers.set('token', '123456') 一致   	})   	return next.handle(req)// 將修改后的請(qǐng)求返回給應(yīng)用   } }

// 先在 NgModule 中導(dǎo)入了 FormsModule 表單庫(kù) // FormsModule 為我們提供了一些模板驅(qū)動(dòng)的指令，例如：ngModel、NgForm import {    FormsModule } from '@angular/forms';   @NgModule({    declarations: [      FormsDemoApp,      DemoFormSku,      // ... our declarations here    ],    imports: [      BrowserModule,      FormsModule,   ],    bootstrap: [ FormsDemoApp ]  })  class FormsDemoAppModule {}

 <div>       <h2>基礎(chǔ)表單:商品名稱(chēng)</h2>       <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">         <div class="sku">           <label for="skuInput">商品名稱(chēng):</label>           <input             type="text"             id="skuInput"             placeholder="商品名稱(chēng)"             name="sku" //使用form時(shí)必須定義，可以理解為當(dāng)前控件的名字             ngModel           />         </div>         <button>提交</button>       </form>     </div>

 <form #f="ngForm" (ngSubmit)="onSubmit(f.value)" >  <!--  	這里使用了 #f=“ngForm”，#v=thing 的意思是我們希望在當(dāng)前視圖中創(chuàng)建一個(gè)局部變量 	這里為視圖中的 ngForm 創(chuàng)建了一個(gè)別名，并綁定到變量 #f 	這個(gè) ngForm 是由 NgForm 指令導(dǎo)出的 	ngForm 的類(lèi)型的對(duì)象是 FormGroup 類(lèi)型的 	這意味著可以在視圖中把變量 f 當(dāng)作 FormGroup 使用，而這也正是我們?cè)谳敵鍪录?(ngSubmit) 中的使用方法 	在表單中綁定 ngSubmit 事件 (ngSubmit)=“onSubmit (f.value)“ 	(ngSubmit) 來(lái)自 NgForm 指令 	onSubmit() 將會(huì)在組件類(lèi)中進(jìn)行定義 	f 就是 FormGroup ，而 .value 會(huì)以鍵值對(duì)的形式返回 FormGroup 中所有控件的值 	 	總結(jié)：當(dāng)提交表單時(shí)，將會(huì)以該表單的值作為參數(shù)，調(diào)用組件實(shí)例上的 `onSubmit` 方法 -->

// 先在 NgModule 中導(dǎo)入了 ReactiveFormsModule 表單庫(kù) import {    ReactiveFormsModule  } from '@angular/forms';  @NgModule({   imports: [     FormsModule,     ReactiveFormsModule   ] })   // 使用 formGroup 和 formControl 指令來(lái)構(gòu)建這個(gè)組件，需要導(dǎo)入相應(yīng)的類(lèi) import {    FormBuilder,    FormGroup,   ReactiveFormsModule } from '@angular/forms';   // 在組件類(lèi)上注入一個(gè)從 FormBuilder 類(lèi)創(chuàng)建的對(duì)象實(shí)例，并把它賦值給 fb 變量（來(lái)自構(gòu)造函數(shù)） export class DemoFormSkuBuilder {    myForm: FormGroup;  // myForm 是 FormGroup 類(lèi)型   constructor(fb: FormBuilder) {      // FormBuilder 中的 group 方法用于創(chuàng)建一個(gè)新的 FormGroup     // group 方法的參數(shù)是代表組內(nèi)各個(gè) FormControl 的鍵值對(duì)     this.myForm = fb.group({  // 調(diào)用 fb.group () 來(lái)創(chuàng)建 FormGroup       // 設(shè)置一個(gè)名為 sku 的控件，控件的默認(rèn)值為 "123456"       'sku': ['123456']      });    }   onSubmit(value: string): void {      console.log('submit value:', value);    }  }

<h2 class="ui header">Demo Form: Sku with Builder</h2> <!--   	當(dāng)導(dǎo)入 FormsModule 時(shí)，ngForm 就會(huì)自動(dòng)創(chuàng)建它自己的 FormGroup 	但這里不希望使用外部的 FormGroup，而是使用 FormBuilder 創(chuàng)建這個(gè) myForm 實(shí)例變量 	Angular提供了 formGroup 指令，能讓我們使用現(xiàn)有的 FormGroup 	NgForm 不會(huì)應(yīng)用到帶 formGroup 屬性的節(jié)點(diǎn)上 	這里我們告訴Angular，想用 myForm 作為這個(gè)表單的 FormGroup --> <form [formGroup]="myForm"    <label for="skuInput"> SKU </label>    <input type="text"       id="skuInput"       placeholder="SKU"       [formControl]="myForm.controls['sku']"> <!--   	將 FormControl 綁定到 input 標(biāo)簽上 :  	ngModel 會(huì)創(chuàng)建一個(gè)新的 FormControl 對(duì)象并附加到父 FormGroup 中 	但在例子中，我們已經(jīng)用 FormBuilder 創(chuàng)建了自己的 FormControl 	要將現(xiàn)有的 FormControl 綁定到 input 上，可以用 formControl 指令 	將 input 標(biāo)簽上的 formControl 指令指向 myForm.controls 上現(xiàn)有的 FormControl 控件 sku   -->

const control = new FormControl('name', Validators.required);  // 在組件定義類(lèi)中使用 FormBuilder   constructor(fb: FormBuilder) {      this.myForm = fb.group({        'name': ['',Validators.required]      });      this.name = this.myForm.controls['name'];    }

template:`<div>       <h2>商品表單:商品名稱(chēng)</h2>       <form [formGroup]="myForm" (ngSubmit)="onSubmit(myForm)">         <div>           <label for="nameInput">商品名稱(chēng)：</label>           <input             type="text"             id="nameInput"             placeholder="請(qǐng)輸入名稱(chēng)"             [formControl]="myForm.controls['name']"           />           <div style="color:red" *ngIf="!name.valid">             名稱(chēng)無(wú)效           </div>           <div style="color:red" *ngIf="name.hasError('textinvalid')">             名稱(chēng)不是以“123”開(kāi)頭           </div>           <div *ngIf="name.dirty">             數(shù)據(jù)已變動(dòng)           </div>         </div>         <div>           <label for="codeInput">商品料號(hào)：</label>           <input             type="text"             id="codeInput"             placeholder="請(qǐng)輸入料號(hào)"             [formControl]="myForm.controls['code']"           />           <div             style="color:red"             *ngIf="myForm.controls.code.hasError('required')"           >             該項(xiàng)必填           </div>           <div             style="color:red"             *ngIf="myForm.controls.code.hasError('pattern')"           >             只可輸入數(shù)字和英文           </div>         </div>         <div style="color:green" *ngIf="myForm.isvalid">           表單無(wú)效         </div>         <div style="color:green" *ngIf="myForm.valid">           表單有效         </div>         <button type="submit">提交</button>       </form>     </div>` 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 源代碼中實(shí)現(xiàn) Validators.required  export class Validators {   // 接收一個(gè) AbstractControl 對(duì)象作為輸入 	static required(control: AbstractControl): ValidationErrors | null; } // 當(dāng)驗(yàn)證器失敗時(shí)，會(huì)返回一個(gè) String Map<string,any> 對(duì)象，他的鍵是” 錯(cuò)誤代碼 “，它的值是 true export declare type ValidationErrors = {     [key: string]: any; };  // 自定義驗(yàn)證器 function textValidator(   controls: FormControl // 因?yàn)镕ormControl繼承于 AbstractControl 所以也可以寫(xiě)成FormControl對(duì)象 ): {   [s: string]: boolean; } {   if (!controls.value.match(/^123/)) {     return { textinvalid: true };   } }

Validators.compose([Validators.required, textValidator]) // 不用compose   [Validators.required, textValidator] // 保留 compose 是為了向以前歷史版本進(jìn)行兼容，不用 compose 也可實(shí)現(xiàn)

export class ReativeFormsComponent implements OnInit {   ngOnInit() {     this.addContact()   }   //動(dòng)態(tài)表單   personMess: FormGroup = new FormGroup({     //生成動(dòng)態(tài)表單數(shù)組     contacts: new FormArray([])    })   //獲取數(shù)組對(duì)象   get contacts(){     return this.personMess.get('contacts') as FormArray   }   //增加一個(gè)表單組   addContact(){     let myContact = new FormGroup({       name: new FormControl(),       phone: new FormControl()     })     this.contacts.push(myContact)   }    //刪除一個(gè)表單組   deleteContact(i:number){     this.contacts.removeAt(i)   }   //提交表單   OnSubmit() {     console.log(this.personMess.value)   } }

<form [formGroup]="personMess" (submit)="OnSubmit()">   <div formArrayName="contacts">     <!-- 注意：這里遍歷的時(shí)contacts.controls -->     <div *ngFor="let contact of contacts.controls;let i =index" [formGroupName]="i">       <input type="text" formControlName="name">       <input type="text" formControlName="phone">       <button (click)="deleteContact(i)">刪除信息</button>     </div>   </div>   <button (click)="addContact()">添加信息</button><br>   <input type="submit"> </form>