簡(jiǎn)介

由于angular版本更新頻繁，導(dǎo)致學(xué)習(xí)起來(lái)特別費(fèi)勁，下面是在學(xué)習(xí) Angular 過(guò)程中整理的學(xué)習(xí)筆記，希望對(duì)大家能有所幫助，更詳細(xì)和更權(quán)威的學(xué)習(xí)資源砚嘴，請(qǐng)大家閱讀官方文檔。另外涩拙，本系列的出發(fā)點(diǎn)是從點(diǎn)到面的思路际长，把 Angular 中的知識(shí)點(diǎn)打散掉，然后逐一介紹兴泥，盡量會(huì)使用簡(jiǎn)單的示例工育，讓大家基礎(chǔ)掌握每個(gè)知識(shí)點(diǎn)，最后才會(huì)通過(guò)具體實(shí)例把知識(shí)點(diǎn)串起來(lái)郁轻。

父子組件通訊通過(guò)@input 翅娶，及@Output文留，傳遞通訊

父組件

import { Component, OnInit, Input, ElementRef, ViewChild  } from '@angular/core';
import { bussinessMenu } from "../componets/business/menu";
/**
 *css業(yè)務(wù)組件API說(shuō)明文檔
 * @by weijb
 */
@Component({
    selector: 'app-business',
    templateUrl: './business.component.html',
    styleUrls: ['./business.component.scss']
})
export class BusinessComponent implements OnInit{
    @ViewChild('hjIframe') hjIframe: ElementRef; //通過(guò)@ViewChild獲取元素
    /*定義UI組件左側(cè)菜單*/
    private leftMenu=bussinessMenu;
    /*定義UI組件API內(nèi)容*/
    private contentHtml = bussinessMenu[0]['subMenu'][0].html;
    /*定義UI組件iframe的url地址*/
    private url = "http://localhost/srm-app-compontents/www/index.html#/business";
    constructor() {}
    ngOnInit(){
        this.hjIframe.nativeElement.src = this.url;
    }
    /**
     *獲取子組件的事件
     *@params item
     */
    onLeftEvent(item) {
        this.contentHtml = item.html;
        this.url = item.src;
        this.hjIframe.nativeElement.src = item.src;
    }

}

子組件

import { Component, OnInit, Inject, Output, Input, EventEmitter } from '@angular/core';
import { domain } from "../constant";
/**
 *左側(cè)導(dǎo)航欄處理方法
 * @weijb
 */
@Component({
    selector: 'project-left',
    templateUrl: './project-left.component.html',
    styleUrls: ['./project-left.component.scss']
})
export class ProjectLeftComponent implements OnInit {
    public leftNavs = [];
    public currentItem: any; /*當(dāng)前的模塊*/
    @Input("leftMenu") leftMenu: any; /*顯示左側(cè)導(dǎo)航菜單*/
    @Output() leftEvent: EventEmitter < any > = new EventEmitter();
    /*廣播事件的發(fā)送對(duì)象*/
    constructor() {}
    /**
     *作用:左側(cè)菜單默認(rèn)的數(shù)據(jù)
     */
    ngOnInit() {
        this.leftNavs = this.leftMenu;
    }

    /**
     *右側(cè)導(dǎo)航點(diǎn)擊事件 
     *@params index 點(diǎn)擊的索引位置
     */
    navClick(index) {
        if(this.leftNavs[index].subMenu){
            this.leftNavs[index].showSubMenu = true;
        }else{
            this.leftNavs.forEach((res, i) => {
            if(index == i) {
                if(res.subMenu != null) {
                    res.showSubMenu = true;
                    this.currentItem = res.subMenu[0];
                } else {
                    this.currentItem = res;
                }
                res.active = true;
            } else {
                res.active = false;
                if(res.subMenu != null) {
                    res.subMenu.forEach((res) => {
                        res.active = false;
                    })
                }
            }
            res.showSubMenu = false;
        })
        /*發(fā)送廣播*/
            if(this.currentItem.src.indexOf('http://') == -1) {
                this.currentItem.src = domain + this.currentItem.src;
            }
            this.leftEvent.emit(this.currentItem);
        }
    }
    /**
     *右側(cè)二級(jí)導(dǎo)航欄 
     *@params parentIndex 父索引位置, subIndex 子索引位置
     */
    subNavClick(parentIndex, subIndex) {
        this.leftNavs.find(leftMenu =>{
            if(leftMenu.active){
                leftMenu.active = false;
                return leftMenu.active
            }
        });
        this.leftNavs[parentIndex].subMenu.forEach((res, i) => {
            if(subIndex == i) {
                this.currentItem = res;
                res.active = true;
            } else {
                res.active = false;
            }
        })
        /*發(fā)送廣播*/
            if(this.currentItem.src.indexOf('http://') == -1) {
                this.currentItem.src = domain + this.currentItem.src;
            }
        this.leftEvent.emit(this.currentItem);
    }
}