Angular4 组件通讯方法及DOM的操作使用

简介

由于angular版本更新频繁，导致学习起来特别费劲，下面是在学习 Angular 过程中整理的学习笔记，希望对大家能有所帮助，更详细和更权威的学习资源，请大家阅读官方文档。另外，本系列的出发点是从点到面的思路，把 Angular 中的知识点打散掉，然后逐一介绍，尽量会使用简单的示例，让大家基础掌握每个知识点，最后才会通过具体实例把知识点串起来。

父子组件通讯通过@input ，及@Output，传递通讯

父组件

import { Component, OnInit, Input, ElementRef, ViewChild  } from '@angular/core';
import { bussinessMenu } from "../componets/business/menu";
/**
 *css业务组件API说明文档
 * @by weijb
 */
@Component({
    selector: 'app-business',
    templateUrl: './business.component.html',
    styleUrls: ['./business.component.scss']
})
export class BusinessComponent implements OnInit{
    @ViewChild('hjIframe') hjIframe: ElementRef; //通过@ViewChild获取元素
    /*定义UI组件左侧菜单*/
    private leftMenu=bussinessMenu;
    /*定义UI组件API内容*/
    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";
/**
 *左侧导航栏处理方法
 * @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; /*当前的模块*/
    @Input("leftMenu") leftMenu: any; /*显示左侧导航菜单*/
    @Output() leftEvent: EventEmitter < any > = new EventEmitter();
    /*广播事件的发送对象*/
    constructor() {}
    /**
     *作用:左侧菜单默认的数据
     */
    ngOnInit() {
        this.leftNavs = this.leftMenu;
    }

    /**
     *右侧导航点击事件 
     *@params index 点击的索引位置
     */
    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;
        })
        /*发送广播*/
            if(this.currentItem.src.indexOf('http://') == -1) {
                this.currentItem.src = domain + this.currentItem.src;
            }
            this.leftEvent.emit(this.currentItem);
        }
    }
    /**
     *右侧二级导航栏 
     *@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;
            }
        })
        /*发送广播*/
            if(this.currentItem.src.indexOf('http://') == -1) {
                this.currentItem.src = domain + this.currentItem.src;
            }
        this.leftEvent.emit(this.currentItem);
    }
}