自學Angular5

釋迦摩尼發表於2018-01-08
Angular

簡介

本人是2017年開始接觸angular2+版本的，一路走過來也看著angular越變越好，自學的道路上也走了不少的彎路，建議在學angular的時候最好掌握一些其它必要的知識。這裡寫這篇文章也是想分享下我是如何學習angular的，給你們剛學習angular的同學們鋪鋪路，如果寫的看的不明白的同學歡迎留言。

什麼是Angular

Angular 是一個開發平臺。它能幫你更輕鬆的構建 Web 應用。Angular 集宣告式模板、依賴注入、端到端工具和一些最佳實踐於一身，為你解決開發方面的各種挑戰。Angular 為開發者提升構建 Web、手機或桌面應用的能力。（引用官網簡介）
這篇文章主要講述了我平時工作上遇到的問題。寫的比較粗糙，想起什麼就寫什麼，沒有統一的規劃，後續如有機會可以寫一篇進階版。

需要哪些技術？

Angular CLI

Angular CLI是一個命令列介面工具，它可以建立專案、新增檔案以及執行一大堆開發任務，比如測試、打包和釋出。（引用官網簡介）
  1. npm install -g @angular/cli    
  2. ng new my-app --routing --style less  （--routing 帶有路由模組，--style less 樣式表為less）
  3. ng serve -p 4800 --aot --host 0.0.0.0 --disable-host-check true  （-p 啟動埠4800 --disable-host-check true 開啟埠檢查 --aot aot編譯）
  4. ng build --prod -nc  （--prod 成產模式 -nc chunks以模組名命名）

Angular組建

執行 ng g c index，自動在app檔案下建立組建index。
@Component({
    selector: 'app-index',//選擇器
    encapsulation: ViewEncapsulation.None,//Emulated 預設 Native 私有無法訪問 None 不處理
    styleUrls: ['./index.component.less'],//樣式錶連結
    styles: ['.primary {color: red}'],
    viewProviders:[],//依賴模組
    providers:[],//依賴服務
    exportAs:'appIndex',//模組匯出標識
    //templateUrl: './index.component.html',//模板連結
    template:"<div>{{msg}}</div>",
    host:{
        '[class.test]': 'true',
        '[attr.id]': ''test'',
    }
})
export class IndexComponent{
    constructor() {
    }

    @ViewChild('movieplayer') movieplayerRef:ElementRef//獲取當前dom例項。

    msg:string = 'hello angular';
    clickTest(){}
    list:Array<any> = [1,2,3,4,5];
    show:boolean = true;
    word:string
    width:number = 100;
    showTest:boolean = true;

    @Output() myEvent = new EventEmitter<any>();
    @Input() myProperty;
    _my2Property
    @Input() set my2Property(val){
        this._my2Property = val;
    };
    get my2Property(){
        return this._my2Property;
    }
}複製程式碼

<app-index [myProperty]="{a:1}" (myEvent)="$event.stopPropagation()" #indexRef="appIndex"></app-index>複製程式碼

Angular模板語法

  1. []  屬性繫結
  2. ()  事件繫結
  3. *ngFor  列表渲染
  4. *ngIf  條件渲染
  5. [(ngModel)]  雙向繫結
  6. #xxxx  區域性變數
<div 
    [title]="msg" 
    (click)="clickTest($event)" 
    [style.width.px]="width"
    [ngStyle]="{'width.%':width}"
    [ngClass]="{'class-test':showTest}"
    [class.class-test]="showTest"
    *ngFor="let li of list;let i = index;trackBy: trackById" 
    *ngIf="show">
    <input type="text" [(ngModel)]="word">
    {{word}}
</div>

<video #movieplayer></video>
<button (click)="movieplayer.play()">

<ng-template ngFor [ngForOf]="list" let-li let-i="index" let-odd="odd" [ngForTrackBy]="trackById"></ng-template>

<ng-template [ngIf]="show"></ng-template>

<div [ngSwitch]="conditionExpression">
    <template [ngSwitchCase]="case1Exp"></template>
    <template ngSwitchCase="case2LiteralString"></template>
    <template ngSwitchDefault></template>
</div>複製程式碼

路由與導航

  • routing.module.ts
const routes: Routes = [
    {
         path:'',
         component:IndexComponent,
         resolve:{resolve:ResolverService},
         canActivate:[AuthGuard],
         data:{},
    }
]

@NgModule({
    imports: [RouterModule.forRoot(routes,{useHash: true})],
    exports: [RouterModule]
})
export class IndexRoutingModule {
    
}複製程式碼
  • resolver-service.ts
@Injectable()
export class CurrentResolverService implements Resolve<any> {
    constructor(private router: Router, private userService_: UserService) {
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
        //1.
        return Observable.create({})
        //2.
        return new Promise((resolve, reject) => {
            setTimeout(()=> {
                resolve({})
            },2000)
        })
        //3.
        return {}
    }
}



複製程式碼
  • auth.guard.ts
@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {

    constructor() {

    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        //1.
        return Observable.create(false)
        //2.
        return new Promise((resolve, reject) => {
            setTimeout(()=> {
                resolve(false)
            },2000)
        })
        //3.
        return false
    }

    //子路由守護
    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.canActivate(childRoute, state);
    }

    //非同步載入元件
    canLoad(route: Route): Observable<boolean> | Promise<boolean> | boolean {
        return null;
    }
}複製程式碼
  • 位置標記
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>複製程式碼
  • 路由跳轉
<a routerLink="/path" [routerLinkActive]="'active'">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">複製程式碼

生命週期

  • ngOnChanges  當組建繫結資料發生改變將會觸發此生命週期
//OnChanges
ngOnChanges(changes: SimpleChanges): void {
    let value = changes.test && changes.test.currentValue
}複製程式碼
  • ngOnInit  在呼叫完建構函式、初始化完所有輸入屬性
//OnInit
ngOnInit(): void{
    
}複製程式碼
  • ngDoCheck  每當對元件或指令的輸入屬性進行變更檢測時就會呼叫。可以用它來擴充套件變更檢測邏輯，執行自定義的檢測邏輯。
//DoCheck
ngDoCheck(): void {
    console.info('ok')
}複製程式碼
  • ngOnDestroy  只在例項被銷燬前呼叫一次。
//OnDestroy
ngOnDestroy(): void {
    console.info('ok')
}複製程式碼

服務

為了不再把相同的程式碼複製一遍又一遍，我們要建立一個單一的可複用的資料服務，並且把它注入到需要它的那些元件中。 使用單獨的服務可以保持元件精簡，使其集中精力為檢視提供支援，並且，藉助模擬（Mock）服務，可以更容易的對元件進行單元測試。（引用官網）
@Injectable()
export class TestService {
    constructor() {
    }

    private data = {num:1};

    get num(){
        return this.data.num
    }

    add(){
        ++this.data.num
    }

    minus(){
        --this.data.num
    }
}複製程式碼

如何使用服務

  • 如果怎個專案已單例的模式，直接注入到 app.module.ts 後設資料  providers 中即可
@NgModule({
    providers:[
        TestService
    ]
})複製程式碼
  • 非單例模式直接引入到自身的元件或模組的 providers中 即可。
@Component({
    providers:[
        TestService
    ]
})複製程式碼

依賴注入

依賴注入是重要的程式設計模式。 Angular 有自己的依賴注入框架，離開了它，幾乎沒法構建 Angular 應用。 它使用得非常廣泛，以至於幾乎每個人都會把它簡稱為 DI。（引用官網）

通過建構函式注入 TestService 例項，並把它存到名為 _testService 的私有屬性中
export class IndexComponent{
    constructor(private _testService:TestService) {
    }
}複製程式碼
替代providers
@Injectable()
export class Test2Service extend TestService{
    constructor() {
        super();
    }
}

@Component({
    providers:[
        { provide: TestService, useClass: Test2Service}
    ],//依賴服務
})
export class IndexComponent{
    constructor(private _testService:TestService) {
    }
}複製程式碼

HTTP 服務

版本的跟新由之前的 HttpModule  模組 變更為  HttpClientModule  。
建議在app.module.ts 引入  HttpClientModule 
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        CommonModule,
        FormsModule,
        HttpClientModule,
    ],
    providers: [
        
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
} 複製程式碼
這樣配置之後就可以任意模組或元件中使用 HttpClient  服務。
下面是幾個比較常用的方法。
request(method: string, url: string, options: {
    body?: any;
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe?: 'body';
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType: 'any';
    withCredentials?: boolean;
}): Observable<any>;

get(url: string, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe?: 'body';
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType: 'any';
    withCredentials?: boolean;
}): Observable<any>;

post(url: string, body: any | null, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe?: 'body';
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType: 'any';
    withCredentials?: boolean;
}): Observable<any>;複製程式碼
這樣用寫，處理一些同樣的操作時就不太方便，也不好維護，這邊我的做法是用類統一封裝一下，所有的介面呼叫都通過這個類處理。

//定義介面返回的引數欄位 一般介面返回的引數都是固定的
export interface Result<T> {
    result?: any
    success?: any
    message?: any
}複製程式碼

export class ConfigService {
    static baseUrl    = 'http://127.0.0.1:8080';
    static uploadPath = 'http://127.0.0.1:8080';
    constructor(private _http: HttpClient) {

    }

    configForm() {
        return new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
    }

    /**
     * @deprecated 直接通過FormData處理
     */
    configFormData() {
        return new HttpHeaders().set('Content-Type', 'multipart/form-data');//;charset=UTF-8
    }

    configJson() {
        return new HttpHeaders().set('Content-Type', 'application/json;charset=UTF-8');
    }

    postForm<T>(url, body = {}, config = {}): Observable<Result<T>> {
        return this._http.post<T>(ConfigService.baseUrl + url, qs.stringify(body), {headers: this.configForm(), ...config})
    }

    postFormData<T>(url, body = {}, config = {}): Observable<Result<T>> {
        const f = new FormData();
        for (let i in body) {
            f.append(i, body[i]);
        }
        return this._http.post<T>(ConfigService.baseUrl + url, f, {...config})
    }

    postFormDataUpload<T>(url, body = {}, config = {}): Observable<Result<T>> {
        const f = new FormData();
        for (let i in body) {
            if(body.hasOwnProperty(i)) f.append(i, body[i]);
        }
        return this._http.post<T>(ConfigService.uploadPath + url, f, {...config})
    }

    postJson<T>(url, body = {}, config = {}): Observable<Result<T>> {
        return this._http.post<T>(ConfigService.baseUrl + url, body, {headers: this.configJson(), ...config})
    }

    get<T>(url, body: any = {}, config = {}): Observable<Result<T>> {
        return this._http.get<T>(`${ConfigService.baseUrl + url}?${qs.stringify(body)}`, config)
    }
}複製程式碼
通過這樣封裝之後，不管什麼方法，最終的引數傳遞都是  url, body, config 。方便管理。如果專案龐大，可以多加幾個服務，按照模組劃分，不同的模組由不同的 service 服務。

@Injectable()
export class UserService extends ConfigService {
    constructor(_http: HttpClient) {
        super(_http);
    }

    /**
     * 退出
     * @returns {Observable<Result<any>>}
     */
    quit() {
        return this.get(`url`)
    }

    /**
     * 登入
     * @returns {Observable<Result<any>>}
     */
    login(body = {},config = {}) {
        return this.postJson(`url`, body, config)
    }

     /**
     * 註冊
     * @returns {Observable<Result<any>>}
     */
    register(body = {},config = {}){
        return this.postForm('url', body, config);
    }
}


複製程式碼
這樣寫的好處是結構清晰，協同開發比較友好，各自負責自己的模組。

HTTP攔截器

所有的介面請求都會通過攔截器，由它決定是否繼續請求。類似window.addEventListener('fetch',(event)=> {}) 這個監聽事件。官網文件移步
@Injectable()
export class NoopInterceptor implements HttpInterceptor {
    constructor() {
    }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        req = req.clone({headers: req.headers});
        let xhr = next.handle(req);
        return xhr
            .do(response => {
                if (response instanceof HttpResponse) {
                    if (response.type == 4) {
                        if (response.status == 200) {
                            //...統一的邏輯處理，比如彈幕提示
                        } else if (response.status == 500) {
                            //...統一的錯誤處理
                        }
                    }
                }
            }).catch(error => {
                return Observable.throw(error || "Server Error");
            })
    }
}複製程式碼
使用方法如下，這樣所有的介面請求都會經過NoopInterceptor類。
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        CommonModule,
        FormsModule,
        HttpClientModule,
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: NoopInterceptor,
            multi: true,
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
} 複製程式碼
如果想看angular的理論知識可以移步

如何編寫管道（Pipe）

Angular內建了一些管道，比如DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。 它們全都可以直接用在任何模板中。（引用官網）
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
    /**
    * @value 預處理的值
    * @args  引數陣列 {{value | keys:xxx:xxxx}} xxx、xxxx就是引數
    * @return 必須要有返回值
    */
    transform(value, args: string[]): any {
        let keys = [];
        for (let key in value) {
            keys.push({key: key, value: value[key]});
        }
        return keys;
    }
}複製程式碼
純(pure)管道與非純(impure)管道
//預設是純Pipe
@Pipe({
    name: 'keys',
    pure: true,
})
//非純Pipe
@Pipe({
    name: 'keys',
    pure: false,
})複製程式碼
他們的區別在於變更檢測，如果數值未來將不會改變，則用純管道，否者用非純管道。

如何編寫動畫

在現在的版本當中，動畫模組已經獨立出去了，在嚮應用程式新增動畫之前，需要將一些動畫特定的模組和函式匯入到根應用程式模組BrowserAnimationsModule 。
@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule ],
})
export class AppModule { }複製程式碼

import {animate, style, transition, trigger} from '@angular/animations';

export const fadeIn = trigger('fadeIn', [
    transition('void => *', [
        style({opacity: 0}),
        animate(150, style({opacity: 1}))
    ]),
    transition('* => void', [
        animate(150, style({opacity: 0}))
    ])
]);

/**
* 使用方式
*/
@Component({
    animations:[fadeIn],
    template: `
       <div [@fadeIn]></div>
    `,
})
export class IndexComponent{
    constructor() {
    }
}複製程式碼
我這裡只演示最簡單的用法，建議去看官網文件，請移步

路由非同步載入

非同步元件最小單位是模組NgModule ，直接上程式碼。
  • user-list.component.ts
@Component({
    selector: 'app-user-list',
    templateUrl: './user-list.component.html',
    encapsulation: ViewEncapsulation.None,//html不做任何處理
    styleUrls: ['./user-list.component.less']
})
export class UserListComponent implements OnInit {
    
}複製程式碼
  • user-routing.module.ts
const routes = [
    {
        path: '',
        children:[
            {
                path: 'userList',
                component: UserListComponent
            },
        ]
    }
]
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class UserRoutingModule {
}複製程式碼
  • user.module.ts
@NgModule({
    declarations: [
        UserListComponent,
    ],
    imports: [
        UserRoutingModule
    ],
    providers: [],
})
export class UserModule {
}複製程式碼
  • app-routing.module.ts
const routes = [
    {
        path: '',
        component: IndexComponent,
        children:[
            {
                path: 'user',
                loadChildren: 'app/user/user.module#UserModule',
            },
        ]
    }
]
@NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: true})],
    exports: [RouterModule]
})
export class AppRoutingModule {
}複製程式碼

如何編寫一個業務元件

先分析這個元件需要一個什麼樣的結果，需要什麼必要的引數，結構是怎麼樣子的，樣子可以千變萬化，可最終結果就只有一個。
如下圖，做一個類似省市聯動的元件，需求是獲取被選中的省市ID集合，如果父級是勾中狀態，則排除子集，如果父級是非全選狀態也需要排除掉。
自學Angular5
自學Angular5
需求大概知道了以後，需要思考，這個元件將來可能用於其他的需求，在寫元件的時候，儘量把功能細分。
  • directional-select.component.html
<p class="selected-text">
    當前已選擇：
    <span>{{result().length}}</span>個
</p>
<div class="tags-box">
    <ul class="clearfix data-tags">
        <li *ngFor="let rl of resultList;let index = index">
            {{rl.name}}
            <i class="yc-icon icon" (click)="removeResultList(rl)">X</i>
        </li>
    </ul>
</div>
<div class="select-list-inner">
    <div class="scope" *ngFor="let list of cacheList;let index1 = index" [ngStyle]="{'width.%':100.0 / cacheList.length}">
        <ul class="list-with-select">
            <li class="spaui" *ngFor="let l of list;let index2 = index" (click)="pushCache(index1,index2,list)">
                <app-checkbox [(ngModel)]="l.selected" (eventChange)="areaItemChange(l)" [label]="l.name" [checkState]="l.checkState" [not_allow_selected]="l[hasCheckbox]"></app-checkbox>
                <i *ngIf="l[child]?.length > 0" class="icon yc-icon">&#xe664;</i>
            </li>
        </ul>
    </div>
</div>複製程式碼
這個元件依賴 app-checkbox完全可以用原生checkbox代替。
  • directional-select.component.less
.select-list-inner {
    background: #fff;
    width: 100%;
    border: 1px solid #ddd;
    max-height: 272px;
    overflow: auto;
    display: flex;
    .scope {
        &:first-child {
            border-left: none;
        }
        flex: auto;
        width: 0;
        overflow: auto;
        max-height: 270px;
        transition: width .2s;
        border-left: 1px solid #dfe1e7;
        .list-with-select {
            margin: 10px 0;
            .spaui {
                &:hover {
                    background: #f8f9fa;
                }
                height: 40px;
                line-height: 40px;
                padding-left: 20px;
                width: 100%;
                cursor: pointer;
                font-size: 15px;
                position: relative;
                > i {
                    float: right;
                    padding-right: 20px;
                }
            }
        }
    }
}

.tags-box {
    position: relative;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    margin-bottom: 10px;
    overflow-y: auto;
    max-height: 202px;
    overflow-x: hidden;
    transition: height .2s ease-in-out;
    ul.data-tags {
        width: 100%;
        position: relative;
        margin-bottom: 10px;
        li {
            float: left;
            margin-right: 5px;
            border: 1px solid #dfe1e7;
            border-radius: 20px;
            background: #f0f3f6;
            height: 34px;
            line-height: 32px;
            padding-left: 24px;
            padding-right: 8px;
            margin-top: 10px;
            font-size: 14px;
            transition: padding .2s ease-in-out;
            .icon {
                opacity: 0;
                transition: opacity .2s;
            }
            &:hover {
                background: #e1e7f1;
                padding-left: 16px;
                padding-right: 16px;
                transition: padding .2s ease-in-out;
                .icon {
                    opacity: 1;
                    transition: opacity .2s;
                    cursor: pointer;
                }
            }
        }
    }
}

.selected-text {
    float: left;
    line-height: 55px;
    padding-right: 10px;
    > span {
        font-size: 16px;
        font-weight: 700;
        color: #ff5e5e;
    }
}

複製程式碼
  • directional-select.component.ts
import {Component, EventEmitter, forwardRef, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => DirectionalSelectComponent),
    multi: true
};

@Component({
    selector: 'directional-area-select',
    exportAs: 'directionalAreaSelect',
    templateUrl: './directional-select.component.html',
    styleUrls: ['./directional-select.component.less'],
    providers: [
        CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR
    ]
})
export class DirectionalSelectComponent implements OnInit, ControlValueAccessor {

    constructor() {
    }
    
    onChange = (value: any) => {
    };

    writeValue(obj: any): void {
        if (obj instanceof Array && obj.length > 0) {
            this.filterFill(obj);
            this.resultList = this.result(3);
        }
    }

    registerOnChange(fn: any): void {
        this.onChange = fn;
    }

    registerOnTouched(fn: any): void {
    }

    ngOnInit() {

    }

    resultList;
    cacheList: any[] = [];
    private list: any[] = [];

    inputListChange() {
        if (this._inputList instanceof Array && this._inputList.length > 0) {
            this.list = this._inputList.map(d => {
                this.recursionChild(d);
                return d;
            });
            this.cacheList.length = 0;
            this.cacheList.push(this.list);
        }
    }

    _inputList;
    @Input('firstNotSelect') firstNotSelect = false;

    @Input('inputList') set inputList(value) {
        this._inputList = value;
        this.inputListChange();
    }

    @Input('value') value;
    @Input('hasCheckbox') hasCheckbox = 'not_allow_selected';

    @Input('child') child = 'options';
    @Output('eventChange') eventChange = new EventEmitter<any>();

    /**
     * 顯示對應的子集資料列表
     * @param index1 當前層數下標
     * @param index2 當前層數列表的下標
     * @param list 當前層的列表資料
     */
    pushCache(index1, index2, list) {
        //往後選擇
        let cl = this.cacheList[index1 + 1];
        let child = list[index2][this.child];
        if (child instanceof Array && child.length > 0) {
            if (!cl) {
                this.cacheList.push(child);
            } else {
                if (cl !== child) {
                    this.cacheList.splice(index1 + 1, 1, child)
                }
            }
        } else {
            if (cl !== child && !(child instanceof Array)) {
                this.cacheList.pop();
            }
        }

        //往前選擇
        if (child && child.length > 0) {
            while (this.cacheList.length > index1 + 2) {
                this.cacheList.pop();
            }
        }
    }

    removeResultList(data) {
        data.selected = false;
        this.areaItemChange(data);
    }

    //選中有幾個狀態 對於父節點有 1全部選中 2部分選中 3全部取消 checkState 1 2 3
    areaItemChange(data) {
        if (data[this.hasCheckbox]) return;

        let child = data[this.child];

        if (data.selected) {
            data.checkState = 1
        } else {
            data.checkState = 3
        }

        //向下尋找
        if (child && child.length > 0) {
            this.recursionChildCheck(child)
        }
        //向上尋找
        this.recursionParentCheck(data);

        this.resultList = this.result(3);
        if (this.resultList instanceof Array && this.resultList.length > 0) {
            this.onChange(this.resultList.map(r => r.id));
        } else {
            this.onChange(null);
        }

        this.eventChange.next();
    }

    /**
     * 判斷當前物件的父級中的子集被選中的個數和checkState == 2的個數來確定父級的當前狀態
     * 遞迴
     * @param data
     */
    private recursionParentCheck(data) {
        let parent = data.parent;
        if (parent) {
            let l = parent[this.child];
            let length = l.reduce((previousValue, currentValue) => {
                return previousValue + ((currentValue.selected) ? 1 : 0)
            }, 0);
            let length2 = l.reduce((previousValue, currentValue) => {
                return previousValue + ((currentValue.checkState == 2) ? 1 : 0)
            }, 0);
            if (length == l.length) {
                parent.checkState = 1;
                parent.selected = true;
            } else if (length == 0 && length2 == 0) {
                parent.checkState = 3
            } else {
                parent.checkState = 2;
                parent.selected = false;
            }
            this.recursionParentCheck(parent);
        }
    }

    /**
     * 同步子集和父級的狀態
     * 遞迴
     * @param list
     */
    private recursionChildCheck(list) {
        if (list && list.length > 0) {
            list.forEach(data => {
                let checked = data.parent.selected;
                data.selected = checked;
                if (checked) {
                    data.checkState = 1;
                    data.selected = true;
                } else {
                    data.checkState = 3;
                    data.selected = false;
                }
                let l = data[this.child];
                this.recursionChildCheck(l)
            })
        }
    }

    /**
     * 子集包含父級物件
     * 遞迴
     */
    private recursionChild(target) {
        let list = target[this.child];
        if (list && list.length > 0) {
            list.forEach(data => {
                data.parent = target;
                this.recursionChild(data)
            })
        }
    }

    /**
     * type 1 獲取id集合 2獲取key value 3獲取物件引用
     * @param {number} type
     * @param {any[]} result
     * @returns {any[] | undefined}
     */
    result(type = 1, result = []) {
        if (this.firstNotSelect) {
            return this.recursionResult2(this.list, result, type);
        }
        return this.recursionResult(this.list, result, type);
    }

    /**
     * 只獲取最後一層的值
     * @param list
     * @param {any[]} result
     * @param {number} type
     * @returns {any[] | undefined}
     */
    private recursionResult2(list, result = [], type = 1) {
        if (list && list.length > 0) {
            list.forEach(data => {
                let child = data[this.child];
                if (child && child.length > 0) {
                    this.recursionResult2(child, result, type);
                } else if (data.checkState == 1) {
                    switch (type) {
                        case 1:
                            result.push(data.id);
                            break;
                        case 2:
                            result.push({
                                id: data.id,
                                name: data.name,
                            });
                            break;
                        case 3:
                            result.push(data);
                            break;
                    }
                }
            })
        }
        return result;
    }

    private recursionResult(list, result = [], type = 1) {
        if (list && list.length > 0) {
            list.forEach(data => {
                //全部選中並且父級沒有核取方塊
                if ((data[this.hasCheckbox] && data.checkState == 1) || data.checkState == 2) {
                    let child = data[this.child];
                    if (child && child.length > 0) {
                        this.recursionResult(child, result, type);
                    }
                    //全部選中並且父級有核取方塊 結果不需要包含子集
                } else if (data.checkState == 1 && !data[this.hasCheckbox]) {
                    switch (type) {
                        case 1:
                            result.push(data.id);
                            break;
                        case 2:
                            result.push({
                                id: data.id,
                                name: data.name,
                            });
                            break;
                        case 3:
                            result.push(data);
                            break;
                    }
                }
            })
        }
        return result;
    }

    filterFill(result) {
        //運用資料特性 判斷時候選擇了國外的選項
        this.cacheList.length = 1;
        let bo = result.find(n => {
            if (n == 1156 || String(n).length >= 6) return n
        });
        if (result instanceof Array && result.length > 0 && bo) {
            let child = this.list[0][this.child];
            while (child instanceof Array && child.length > 0) {
                this.cacheList.push(child);
                child = child[0][this.child];
            }
        } else {
            let child = this.list[1][this.child];
            while (child instanceof Array && child.length > 0) {
                this.cacheList.push(child);
                child = child[0][this.child];
            }
        }
        this.recursionFilter(result, this.list)
    }

    //遞迴過濾滿足條件物件
    private recursionFilter(target, list, result = []) {
        if (target instanceof Array && target.length > 0) {
            list.forEach((data) => {
                let child = data[this.child];
                let bo = target.find((d => {
                    if (d == data.id) {
                        return d;
                    }
                }));
                if (bo) {
                    data.selected = true;
                    data.checkState = 1;
                    this.recursionChildCheck(child);
                    this.recursionParentCheck(data);
                }
                if (child instanceof Array && child.length > 0) {
                    this.recursionFilter(target, child);
                }
            })
        }
    }
}

複製程式碼
初始化狀態是隻包含頂層父級的列表，點選後將出現對應的子集列表，往後一直類推。
由此可見，可以宣告一個變數cacheList來儲存頂層父級資料作為第一層，可以檢視inputListChange方法。 recursionChild方法是將所有的子集包含自己的父級引用。
pushCache顯示對應的子集資料列表
areaItemChange 當checkbox發生改變的時候就會觸發這個方法。這個方法完成的任務有向上尋找父級改變其狀態，向下尋找子集改變其狀態，將結果以標籤的形式羅列出來，對應的方法可以檢視recursionChildCheck recursionParentCheck result(3)
此類實現了ControlValueAccessor類 ，可以使用雙向繫結來獲取值。

路由守衛許可權管理

上文也講到了路由守衛 auth.guard.ts  ，這個類繼承了 CanActivate  、CanActivateChild  類。

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {
    constructor() {

    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        //1.可以將當前的訪問路由請求後臺訪問當前使用者是否有許可權，或者可以將許可權存入本地快取再進行判斷。
        return Observable.create(false)
        //2.
        return new Promise((resolve, reject) => {
            setTimeout(()=> {
                resolve(false)
            },2000)
        })
        //3.通過本地快取判斷。
        return false
    }

    //子路由守護 父路由啟用了子路由保護，進入自路由將會觸發這個回撥函式。
    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.canActivate(childRoute, state);
    }複製程式碼
  • 路由配置 app-routing.module.ts  

const routes = [
    {
        path: '',
        component: IndexComponent,
        canActivate: [AuthGuard],
        children:[
            {
                path: 'user',
                loadChildren: 'app/user/user.module#UserModule',
            },
        ]
    }
]
@NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: true})],
    exports: [RouterModule]
})
export class AppRoutingModule {
}複製程式碼

  •  user-routing.module.ts  

const routes: Routes = [
    {
        path: '',
        canActivateChild: [AuthGuard],//守護子路由
        children: [
            {
                path: 'userlist',
                component: UserListComponent,
                resolve: {jurisdiction: CurrentResolverService},
                data: {current: limitRole.userlist}
            }
        ]
    }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class UserRoutingModule {
}複製程式碼



相關文章