angular2之父子组件的调用

1.父组件ts

/**

* 描述:查询分析

* @version:1.0.0

* @author: zb

* @创建时间: 2017-06-08 15:37:59

*/

import { Component, OnInit, OnDestroy, ViewChild } from ‘@angular/core‘;

import { Router, ActivatedRouteSnapshot, NavigationEnd, RoutesRecognized } from ‘@angular/router‘;

import { Http, Headers } from ‘@angular/http‘;

import { Observable } from ‘rxjs/Rx‘;

import { EventManager, AlertService } from ‘ng-jhipster‘;

import { Subscription } from ‘rxjs/Rx‘;

import { ITEMS_PER_PAGE, Principal } from ‘../shared‘; // 分页设置，权限验证等

import { API_URL } from ‘../app.constants‘;

import { TreeModule, TreeNode } from ‘primeng/primeng‘;

import { TabViewModule, Message } from ‘primeng/primeng‘;

import { WrRvSegMgmtComponent, WrRvRecMgmtComponent, BaseComponentsMgmtComponent, WrRvRecMgmtDetailComponent, WrRvLogMgmtComponent, WrRvLogMgmtDetailComponent } from ‘./‘;

import { WrRvRecChartComponent, WrRvLogChartComponent, WrRvSegMgmtDetailComponent } from ‘./‘;

import { BaseComponentsChartComponent } from ‘./‘;

import { PdoBCountMgmtDetailComponent, StBCountMgmtDetailComponent, WrRvSegPsMgmtDetailComponent, WrIntBMgmtDetailComponent } from ‘./‘;

import { LocalStorageService, SessionStorageService } from ‘ng2-webstorage‘;

@Component({

selector: ‘wr-query-analyze‘,

styles: [`

p-tree{

float:left;

margin-right:0.5rem;

}

p-datatable{

display:flex;

}

p-tabView{

display:flex;

padding: 0em 0em 0em;

}

.form-inline button{

margin-left:0.5rem;

}

h2{

margin:0.5rem 0;

}

.data-table-wrap{

// display:inline-block;

}

.data-table-wrap p-tree{

float: left;

height: 48.9rem;

margin-right: 1rem;

}

:host >>> .ui-tree{

height: 100%;

width:16em;

margin-top:0.5rem;

}

.areaTable{

display: flex;

}

:host >>> .col-button{

text-align:center;

}

:host >>> .col-button button{

margin:0.5rem 0;

}

:host >>> .data-table-search{

display: flex;

margin-top:0.5rem;

margin-bottom:0.5rem;

}

:host >>> .form-group:nth-child(2){

margin:0 1rem;

}

:host >>> .form-inline{

flex:1;

-webkit-box-flex:1;

}

:host >>> .form-inline .form-control {

display: inline-block;

width: auto;

margin-left: 4px;

vertical-align: middle;

}

:host >>> .modal-dialog{

margin-top:15%;

}

p-calendar{

display: -webkit-box;

-webkit-box-flex: 1;

}

:host >>> .dialog-datepick{

display: -webkit-box;

-webkit-box-flex: 1;

}

:host >>> .ui-inputtext {

display: -webkit-box;

padding: .5rem .75rem;

font-size: 1rem;

line-height: 1.25;

}

:host >>> .btn-update{

position: absolute;

right: 25px;

top: 0;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

}

:host >>> .ui-tabview-nav{

border:0px;

border-bottom:1px solid #d9d9d9;

padding:0 !important;

}

:host >>> .ui-tabview .ui-tabview-panel{

padding:1em 0;

}

:host >>> .ui-tabview{

width:100%;

}

.ui-tabview-panel{

padding:0;

}

`],

templateUrl: ‘./wr-queryAnalyze.component.html‘

})

export class WrQueryAnalyzeComponent implements OnInit, OnDestroy {

parentCode: string;

// 河段树选择的节点

selectedNode: TreeNode;

// 查询条件

query: any = {};

itemsPerPage: number = ITEMS_PER_PAGE;

totalRecords: number;

sortBy: string;

page: number;

loading: boolean = true;

index: number = 0;

hiddenRec: boolean = true;

hiddenRecDetail: boolean = true;

hiddenLog: boolean = true;

hiddenLogDetail: boolean = true;

rvRecId: string;

hiddenAll: boolean = true;

hiddenPdoBDetail: boolean = true;

hiddenStBDetail: boolean = true;

baseComponentsId: string;

// hiddenRvSegPs: boolean = true;

hiddenRvSegPsDetail: boolean = true;

hiddenIntBDetail: boolean = true;

hiddenSeg: boolean = false;

hiddenSegDetail: boolean = true;

@ViewChild(‘wrRvRecChart‘)

private wrRvRecChart: WrRvRecChartComponent;

@ViewChild(‘wrRvReclist‘)

private wrRvReclist: WrRvRecMgmtComponent;

@ViewChild(‘wrRvRecDetail‘)

private wrRvRecDetail: WrRvRecMgmtDetailComponent;

@ViewChild(‘pdoBDetail‘)

private pdoBDetail: PdoBCountMgmtDetailComponent;

@ViewChild(‘stBDetail‘)

private stBDetail: StBCountMgmtDetailComponent;

@ViewChild(‘RvSegPsDetail‘)

private RvSegPsDetail: WrRvSegPsMgmtDetailComponent;

@ViewChild(‘IntBDetail‘)

private IntBDetail: WrIntBMgmtDetailComponent;

@ViewChild(‘jhiWrRvSeg‘)

private jhiWrRvSeg: WrRvSegMgmtComponent;

@ViewChild(‘baseComponents‘)

private baseComponents: BaseComponentsMgmtComponent;

@ViewChild(‘jhiWrRvLog‘)

private jhiWrRvLog: WrRvLogMgmtComponent;

@ViewChild(‘wrRvLogDetail‘)

private wrRvLogDetail: WrRvLogMgmtDetailComponent;

@ViewChild(‘baseComponentsChart‘)

private baseComponentsChart: BaseComponentsChartComponent;

@ViewChild(‘wrRvLogChart‘)

private wrRvLogChart: WrRvLogChartComponent;

@ViewChild(‘wrRvSegDetail‘)

private wrRvSegDetail: WrRvSegMgmtDetailComponent;

account: any;

/**

* 巡河统计构造函数

* @param http

* @param alertService

*/

constructor(

private http: Http,

private router: Router,

private $localStorage: LocalStorageService,

private $sessionStorage: SessionStorageService,

private eventManager: EventManager, // 事件管理

private alertService: AlertService) { }

/**

* 页面初期加载

*/

ngOnInit() {

// 示例里面使用荣昌区，实际用的时候应该是根据登录人的所在区域来获取

this.account = this.$localStorage.retrieve(‘account‘) || this.$sessionStorage.retrieve(‘account‘);

if (this.account.addvcd != null) {

this.parentCode = this.account.addvcd;

}

// else {

// this.parentCode = "500153000000";

// }

}

//第一级tabView 点击切换加载

onTabChange(event) {

if (event.index == 0) {//河段信息

this.index = 0;

this.hiddenSeg = false;

this.hiddenSegDetail = true;

this.jhiWrRvSeg.selectedNode = this.selectedNode;

this.jhiWrRvSeg.page = 0;

this.jhiWrRvSeg.loadAll();

}

if (event.index == 1) {//基础设施与部件

this.index = 1;

this.hiddenAll = false;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = true;

this.baseComponents.selectedNode = this.selectedNode;

this.baseComponents.page = 0;

this.baseComponents.loadAll();

}

// if (event.index == 2) {//水质信息

// this.index = 2;

// }

if (event.index == 2) {//巡河信息

this.index = 2;

this.hiddenRecDetail = true; //隐藏详细巡河信息

this.hiddenRec = false; //显示巡河信息列表

this.wrRvReclist.selectedNode = this.selectedNode;

this.wrRvReclist.page = 0;

this.wrRvReclist.loadAll();

}

if (event.index == 3) {//河道事件

this.index = 3;

this.hiddenLogDetail = true; //隐藏详细巡河信息

this.hiddenLog = false; //显示巡河信息列表

// this.wrRvLogDetail = wrRvLogDetail;

// this.jhiWrRvLog = jhiWrRvLog;

this.jhiWrRvLog.selectedNode = this.selectedNode;

this.jhiWrRvLog.query = {};

this.jhiWrRvLog.query.ts = ‘‘;

this.jhiWrRvLog.query.ud = ‘‘;

this.jhiWrRvLog.msgs = [];

this.jhiWrRvLog.page = 0;

this.jhiWrRvLog.loadAll();

}

}

//第二级河段信息tabView 点击切换加载

onTabSegChange(event) {

if (event.index == 0) {//河段信息

this.index = 0;

this.hiddenSeg = false;

this.hiddenSegDetail = true;

this.jhiWrRvSeg.selectedNode = this.selectedNode;

this.jhiWrRvSeg.page = 0;

this.jhiWrRvSeg.loadAll();

}

}

/**

* 巡河信息查看详情

* @param rvSegId

*/

loadSegDetail(rvSegId) {

if (rvSegId && rvSegId != null && rvSegId != ‘‘) {

this.hiddenSeg = true;

this.hiddenSegDetail = false;

this.wrRvSegDetail.rvSegId = rvSegId;

this.wrRvSegDetail.loadAll();

}

}

/**

* 从巡河详细返回 到列表页面

* @param back

*/

backSegList(back) {

if (back != null && back != ‘‘ && back == ‘backSegList‘) {

this.hiddenSegDetail = true;

this.hiddenSeg = false;

this.jhiWrRvSeg.selectedNode = this.selectedNode;

this.jhiWrRvSeg.page = 0;

this.jhiWrRvSeg.loadAll();

}

}

/**

* 巡河信息查看详情

* @param rvRecId

*/

loadRecDetail(rvRecId) {

if (rvRecId && rvRecId != null && rvRecId != ‘‘) {

this.hiddenRec = true;

this.hiddenRecDetail = false;

this.wrRvRecDetail.rvRecId = rvRecId;

this.wrRvRecDetail.load();

}

}

/**

* 从巡河详细返回 到列表页面

* @param back

*/

backRecList(back) {

if (back != null && back != ‘‘ && back == ‘backRecList‘) {

this.hiddenRecDetail = true;

this.hiddenRec = false;

this.wrRvReclist.selectedNode = this.selectedNode;

this.wrRvReclist.page = 0;

this.wrRvReclist.loadAll();

}

}

//第二级巡河信息tabView 点击切换加载

onTabRecChange(event) {

if (event.index == 0) {//巡河信息

this.index = 2;

this.hiddenRecDetail = true; //隐藏详细巡河信息

this.hiddenRec = false; //显示巡河信息列表

this.wrRvReclist.selectedNode = this.selectedNode;

this.wrRvReclist.query = {};

this.wrRvReclist.page = 0;

this.wrRvReclist.loadAll();

}

if (event.index == 1) {//巡河信息统计分析

this.index = 2.1;

this.hiddenRecDetail = true; //隐藏详细巡河信息

this.hiddenRec = true; ///隐藏巡河信息列表

this.wrRvRecChart.queryChar = {};

this.wrRvRecChart.selectedNode = this.selectedNode;

this.wrRvRecChart.queryChar.beginTm = new Date(new Date().setMonth((new Date().getMonth() - 3)));

this.wrRvRecChart.queryChar.endTm = new Date();

this.wrRvRecChart.loadChar();

}

}

//第二级基础设施与部件 tabView 点击切换加载

onTabComponentChange(event) {

console.log(event);

if (event.index == 0) {//基础设施与部件

this.index = 1;

this.hiddenAll = false;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = true;

this.baseComponents.selectedNode = this.selectedNode;

this.baseComponents.page = 0;

this.baseComponents.loadAll();

}

if (event.index == 1) {//基础设施与部件统计

this.index = 1.1;

this.hiddenAll = true;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = true;

this.baseComponentsChart.selectedNode = this.selectedNode;

this.baseComponentsChart.ngOnInit();

}

}

//第二级河道事件tabView 点击切换加载

onTabLogChange(event) {

console.log(event);

if (event.index == 0) {//河道事件

this.index = 3;

this.hiddenLogDetail = true; //隐藏详细巡河信息

this.hiddenLog = false; //显示巡河信息列表

this.jhiWrRvLog.selectedNode = this.selectedNode;

this.jhiWrRvLog.query = {};

this.jhiWrRvLog.query.ts = ‘‘;

this.jhiWrRvLog.query.ud = ‘‘;

this.jhiWrRvLog.msgs = [];

this.jhiWrRvLog.page = 0;

this.jhiWrRvLog.loadAll();

}

if (event.index == 1) {//河道事件统计分析

this.index = 3.1;

this.hiddenLogDetail = true; //隐藏详细巡河信息

this.hiddenLog = true; ///隐藏巡河信息列表

// this.wrRvLogChart = wrRvLogChart;

this.wrRvLogChart.selectedNode = this.selectedNode;

this.wrRvLogChart.ngOnInit();

}

}

/**

* 巡河信息查看详情

* @param wrRvLogId

*/

loadLogDetail(wrRvLogId) {

if (wrRvLogId && wrRvLogId != null && wrRvLogId != ‘‘) {

this.hiddenLog = true;

this.hiddenLogDetail = false;

this.wrRvLogDetail.wrRvLogId = wrRvLogId;

this.wrRvLogDetail.load();

}

}

/**

* 基础设施与部件 查看详情

* @param rvRecId

*/

loadDetailAll(event) {

console.log(event);

// 入河排污口 的详情 bdc82aa7-b2da-47ed-8b09-2aeb152a4aaf

if (event.comType == ‘3‘) {

if (event.baseComponentsId != null && event.baseComponentsId != ‘‘) {

this.hiddenAll = true;

this.hiddenPdoBDetail = false;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = true;

this.pdoBDetail.baseComponentsId = event.baseComponentsId;

this.pdoBDetail.load();

}

}

// 水文测站 的详情 ad29b755-6eee-4791-8161-8879684d65cc

else if (event.comType == ‘4‘) {

if (event.baseComponentsId != null && event.baseComponentsId != ‘‘) {

this.hiddenAll = true;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = false;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = true;

this.stBDetail.baseComponentsId = event.baseComponentsId;

this.stBDetail.load();

}

}

// 公示牌 的详情 5806fa4b-36f8-4ac9-ada0-d5b5ee4f80ae

else if (event.comType == ‘9‘) {

if (event.baseComponentsId != null && event.baseComponentsId != ‘‘) {

this.hiddenAll = true;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = false;

this.hiddenIntBDetail = true;

this.RvSegPsDetail.rvSegPsId = event.baseComponentsId;

this.RvSegPsDetail.load();

}

}

// 取水口 的详情 aba27a9b-58b4-4177-afff-cbd1dcd3446c

else if (event.comType == ‘1‘) {

if (event.baseComponentsId != null && event.baseComponentsId != ‘‘) {

this.hiddenAll = true;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = false;

this.IntBDetail.intCd = event.baseComponentsId;

this.IntBDetail.load();

}

}

}

/**

* 从入河排污口详细返回 到列表页面

* @param back

*/

backPdoBList(back) {

if (back != null && back != ‘‘ && back == ‘backPdoBList‘) {

this.hiddenAll = false;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = true;

this.baseComponents.selectedNode = this.selectedNode;

this.baseComponents.page = 0;

this.baseComponents.loadAll();

}

}

/**

* 从水文测站详细返回 到列表页面

* @param back

*/

backStBList(back) {

if (back != null && back != ‘‘ && back == ‘backStBList‘) {

this.hiddenAll = false;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = true;

this.baseComponents.selectedNode = this.selectedNode;

this.baseComponents.page = 0;

this.baseComponents.loadAll();

}

}

/**

* 从公示牌详细返回 到列表页面

* @param back

*/

backRvSegPsList(back) {

if (back != null && back != ‘‘ && back == ‘backRvSegPsList‘) {

this.hiddenAll = false;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = true;

this.baseComponents.selectedNode = this.selectedNode;

this.baseComponents.page = 0;

this.baseComponents.loadAll();

}

}

/**

* 从巡河详细返回 到列表页面

* @param back

*/

backLogList(back) {

if (back != null && back != ‘‘ && back == ‘backLogList‘) {

this.hiddenLogDetail = true;

this.hiddenLog = false;

this.jhiWrRvLog.selectedNode = this.selectedNode;

this.jhiWrRvLog.page = 0;

this.jhiWrRvLog.loadAll();

}

}

/**

* 从取水口详细返回 到列表页面

* @param back

*/

backIntBList(back) {

if (back != null && back != ‘‘ && back == ‘backIntBList‘) {

this.hiddenAll = false;

this.hiddenPdoBDetail = true;

this.hiddenStBDetail = true;

this.hiddenRvSegPsDetail = true;

this.hiddenIntBDetail = true;

this.baseComponents.selectedNode = this.selectedNode;

this.baseComponents.page = 0;

this.baseComponents.loadAll();

}

}

/**

* 页面销毁时的操作

*/

ngOnDestroy() {

}

/**

* 河段树的节点选择事件

* @param node 选中的树节点

*/

onNodeSelect(node) {

this.loading = false;

this.selectedNode = node;

if (this.index == 0) { //加载河段信息

this.jhiWrRvSeg.selectedNode = node;

this.jhiWrRvSeg.page = 0;

this.jhiWrRvSeg.loadAll();

}

if (this.index == 1) {//基础设施与部件

this.baseComponents.selectedNode = node;

this.baseComponents.page = 0;

this.baseComponents.query = {};

this.baseComponents.rvSegIdPath = null;

this.baseComponents.loadAll();

}

if (this.index == 1.1) {//基础设施与部件统计

this.baseComponentsChart.selectedNode = node;

this.baseComponentsChart.selectedNode = this.selectedNode;

this.baseComponentsChart.ngOnInit();

}

// if (this.index == 2) {//水质信息

// }

// if (this.index == 2.1) {//水质信息统计

// }

if (this.index == 2) {//巡河信息

this.wrRvReclist.selectedNode = this.selectedNode;

this.wrRvReclist.page = 0;

this.wrRvReclist.loadAll();

}

if (this.index == 2.1) { //巡河信息统计

this.hiddenRecDetail = true; //隐藏详细巡河信息

this.hiddenRec = true; ///隐藏巡河信息列表

this.wrRvRecChart.selectedNode = this.selectedNode;

this.wrRvRecChart.loadChar();

}

if (this.index == 3) {//

this.jhiWrRvLog.selectedNode = this.selectedNode;

this.jhiWrRvLog.page = 0;

this.jhiWrRvLog.loadAll();

}

if (this.index == 3.1) {

this.index = 3.1;

this.wrRvLogChart.selectedNode = this.selectedNode;

this.wrRvLogChart.ngOnInit();

}

}

}

2.父页面

<div style="width: 1910px;">

<jhi-alert></jhi-alert>

<div class="data-table-wrap">

<rv-seg-query [parentCode]="parentCode" (onNodeSelect)="onNodeSelect($event)"></rv-seg-query>

<div class="data-table-loading" *ngIf="loading">

<i class="loading"></i>

</div>

<p-tabView (onChange)="onTabChange($event)" [selected]="true">

<p-tabPanel header="河段信息">

<wr-rv-seg-list [hidden]="hiddenSeg" #jhiWrRvSeg [selectedNode]="selectedNode" (loadSegDetail)="loadSegDetail($event)"></wr-rv-seg-list>

<wr-rv-seg-detail [hidden]="hiddenSegDetail" #wrRvSegDetail [rvSegId]="rvSegId" (backSegList)="backSegList($event)"></wr-rv-seg-detail>

</p-tabPanel>

<p-tabPanel header="基础设施与部件">

<p-tabView (onChange)="onTabComponentChange($event)">

<p-tabPanel header="信息查询">

<base-cpmponents-list [hidden]="hiddenAll" #baseComponents [selectedNode]="selectedNode" (loadDetailAll)="loadDetailAll($event)"></base-cpmponents-list>

<wr-pdob-detail [hidden]="hiddenPdoBDetail" #pdoBDetail [baseComponentsId]="baseComponentsId" (backPdoBList)="backPdoBList($event)"></wr-pdob-detail>

<wr-stb-detail [hidden]="hiddenStBDetail" #stBDetail [baseComponentsId]="baseComponentsId" (backStBList)="backStBList($event)"></wr-stb-detail>

<wr-rv-seg-ps-detail [hidden]="hiddenRvSegPsDetail" #RvSegPsDetail [rvSegPsId]="rvSegPsId" (backRvSegPsList)="backRvSegPsList($event)"></wr-rv-seg-ps-detail>

<wr-int-b-detail [hidden]="hiddenIntBDetail" #IntBDetail [intCd]="intCd" (backIntBList)="backIntBList($event)"></wr-int-b-detail>

</p-tabPanel>

<p-tabPanel header="统计分析">

<base-cpmponents-chart #baseComponentsChart [selectedNode]="selectedNode"></base-cpmponents-chart>

</p-tabPanel>

</p-tabView>

</p-tabPanel>

<!--<p-tabPanel header="水质信息">

水质信息...........

</p-tabPanel>-->

<p-tabPanel header="巡河信息">

<p-tabView (onChange)="onTabRecChange($event)">

<p-tabPanel header="信息查询">

<wr-rv-rec-list [hidden]="hiddenRec" #wrRvReclist [selectedNode]="selectedNode" (loadRecDetail)="loadRecDetail($event)"></wr-rv-rec-list>

<wr-rv-rec-detail [hidden]="hiddenRecDetail" #wrRvRecDetail [rvRecId]="rvRecId" (backRecList)="backRecList($event)"></wr-rv-rec-detail>

</p-tabPanel>

<p-tabPanel header="统计分析">

<wr-rv-rec-chart #wrRvRecChart [selectedNode]="selectedNode"></wr-rv-rec-chart>

</p-tabPanel>

</p-tabView>

</p-tabPanel>

<p-tabPanel header="河道事件">

<p-tabView (onChange)="onTabLogChange($event)">

<p-tabPanel header="信息查询">

<wr-rv-log-list [hidden]="hiddenLog" #jhiWrRvLog [selectedNode]="selectedNode" (loadLogDetail)="loadLogDetail($event)"></wr-rv-log-list>

<wr-rv-log-detail [hidden]="hiddenLogDetail" #wrRvLogDetail [wrRvLogId]="wrRvLogId" [selectedNode]="selectedNode" (backLogList)="backLogList($event)"></wr-rv-log-detail>

</p-tabPanel>

<p-tabPanel header="统计分析">

<wr-rv-log-chart #wrRvLogChart [selectedNode]="selectedNode"></wr-rv-log-chart>

</p-tabPanel>

</p-tabView>

</p-tabPanel>

</p-tabView>

</div>

</div>

3.子组件ts

/**

* 描述:[TB_WR_RV_REC][巡河记录]表的列表组件

* @version:1.0.0

* @author: zb

* @创建时间: 2017-06-08 18:22:35

*/

import { Component, OnInit, OnDestroy ,Injector,Input,Output, EventEmitter} from ‘@angular/core‘;

import { Response } from ‘@angular/http‘;

import { EventManager, AlertService} from ‘ng-jhipster‘;

import { Subscription } from ‘rxjs/Rx‘;

import { Http, Headers } from ‘@angular/http‘;

import { ITEMS_PER_PAGE, Principal,ChooseAddvUserService } from ‘../shared‘; // 分页设置，权限验证等

import { API_URL } from ‘../app.constants‘;

@Component({

selector: ‘wr-rv-rec-list‘,

styles:[`

p-tree{

float:left;

margin-right:0.5rem;

}

p-datatable{

display:flex;

}

.form-inline button{

margin-left:0.5rem;

}

h2{

margin:0.5rem 0;

}

.data-table-wrap p-tree{

float: left;

height: 50rem;

margin-right: 1rem;

}

:host >>> .ui-tree{

height: 100%;

}

.areaTable{

display: flex;

}

:host >>> .col-button{

text-align:center;

}

:host >>> .col-button button{

margin:0.5rem 0;

}

:host >>> .data-table-search{

display: flex;

margin-top:0.5rem;

margin-bottom:0.5rem;

}

:host >>> .form-group:nth-child(2){

margin:0 1rem;

}

:host >>> .form-inline{

flex:1;

-webkit-box-flex:1;

}

:host >>> .modal-dialog{

margin-top:15%;

}

p-calendar{

display: -webkit-box;

-webkit-box-flex: 1;

}

:host >>> .dialog-datepick{

display: -webkit-box;

-webkit-box-flex: 1;

}

:host >>> .ui-inputtext {

display: -webkit-box;

padding: .5rem .75rem;

font-size: 1rem;

line-height: 1.25;

}

:host >>> .btn-update{

position: absolute;

right: 25px;

top: 0;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

}

`],

templateUrl: ‘./wr-rvRec-management.component.html‘

})

export class WrRvRecMgmtComponent implements OnInit, OnDestroy {

// 河段树选择的节点

@Input() selectedNode: any;

@Output() loadRecDetail = new EventEmitter();

wrRvRecs: any[];

error: any;

success: any;

itemsPerPage: any = ITEMS_PER_PAGE; // 读取配置，每页显示多少条

page: any = 0; // 默认显示第一页

sortBy: any; // 排序

totalRecords: number; // 总页数

loading: boolean;

// 查询条件

query: any = {};

private resourceUrl = `${API_URL}/api/wrRvRecI/queryRec`;

constructor(

private alertService: AlertService, // 错误提示相关的service

private principal: Principal, // 权限验证

private eventManager: EventManager, // 事件管理

private http: Http // 后台访问

) {}

ngOnInit() {

console.log(this.selectedNode);

this.itemsPerPage=15;

}

/**

* 根据查询条件加载列表

*/

loadAll () {

// 在树没有加载之前不加载表格的数据

if (this.selectedNode == null) {

return;

}

this.loading = true;

//选择的是行政区划

if(this.selectedNode.type == "1") {

this.query.type = this.selectedNode.type;

this.query.addvcdPath = this.selectedNode.addvcdPath;

this.query.rvCd = null;

this.query.rvSegIdPath = null;

//选择的是河流

} else if(this.selectedNode.type == "2") {

this.query.type = this.selectedNode.type;

this.query.addvcdPath = this.selectedNode.addvcdPath;

this.query.rvCd = this.selectedNode.rvCd;

this.query.rvSegIdPath = null;

//选择的是河段

} else if(this.selectedNode.type == "3") {

this.query.type = this.selectedNode.type;

this.query.addvcdPath = null;

this.query.rvCd = null;

this.query.rvSegIdPath = this.selectedNode.rvSegIdPath;

}

let body = this.query;

let headers = {

headers: new Headers({

pageIndex: this.page,

pageSize: this.itemsPerPage,

orderBy: this.sortBy,

})

};

this.http.post(`${this.resourceUrl}`, body, headers)

.subscribe(

(res) => this.onSuccess(res.json(), res.headers),

(res) => this.onError(res.json())

);

}

/**

* dataTable进行排序、分页、查询都会触发onLazyLoad事件

* @param e 参数包含分页信息、排序信息、查询信息等

*/

lazyLoad (e) {

// console.log(e);

this.sortBy = e.sortField ? e.sortField + ‘ ‘ + (e.sortOrder === 1 ? ‘asc‘ : ‘desc‘) : null;

this.page = e.first / e.rows;

// 树节点加载出来以后再进行grid的加载

if(this.selectedNode != null) {

this.loadAll();

}

}

loadView(rvRecId?: string){

this.loadRecDetail.emit(rvRecId) ;

}

/**

* 河段树的节点选择事件

* @param node 选中的树节点

*/

onNodeSelect(node) {

this.selectedNode = node;

//选择的是行政区划

if(this.selectedNode.type == "1") {

this.query.type = this.selectedNode.type;

this.query.addvcdPath = this.selectedNode.addvcdPath;

this.query.rvCd = null;

this.query.rvSegIdPath = null;

//选择的是河流

} else if(this.selectedNode.type == "2") {

this.query.type = this.selectedNode.type;

this.query.addvcdPath = this.selectedNode.addvcdPath;

this.query.rvCd = this.selectedNode.rvCd;

this.query.rvSegIdPath = null;

//选择的是河段

} else if(this.selectedNode.type == "3") {

this.query.type = this.selectedNode.type;

this.query.addvcdPath = null;

this.query.rvCd = null;

this.query.rvSegIdPath = this.selectedNode.rvSegIdPath;

}

// 设置pageIndex到第一页

this.page = 0;

this.loadAll();

}

/**

* 搜索

*/

search () {

// TODO 这里搜索的时候需要组织搜索条件

this.page = 0; // 搜索的时候重置分页

this.loadAll();

}

/**

* 列表查询成功之后的回调

* @param data 返回的数据

* @param headers 响应headers

*/

private onSuccess(data, headers) {

if (+data.responseCode !== 100) {

this.alertService.error(data.messageList[0].key, data.messageList[0].message, null); // TODO 需要显示多个message

this.loading = false;

return;

}

this.wrRvRecs = data.rvRecList;

this.totalRecords = data.pageControllerInfo.totalRecordCount;

this.loading = false;

//if(data.rvRecList != null && data.rvRecList.length>0) {

this.loadView(‘‘);

//}

}

ngOnDestroy() {

}

/**

* 失败之后的回调

* @param error 错误

*/

private onError(error) {

this.alertService.error(error.error, error.message, null);

}

}

4.子组件页面

<!--

/**

* 描述:巡河信息

* @version:1.0.0

* @author: zb

* @创建时间: 2017-06-08 13:31:35

*/

-->

<div>

<jhi-alert></jhi-alert>

<div class="data-table-wrap">

<!--搜索loading-->

<div class="data-table-loading" *ngIf="loading">

<i class="loading"></i>

</div>

<div class="data-table-search">

<!--搜索-->

<form class="form-inline" (ngSubmit)="search()">

<div class="form-group">

<label>河段名称：</label>

<input type="text" class="form-control" name="searchName" [(ngModel)]="query.searchName">

</div>

<div class="form-group">

<label>请选择时间：</label>从&nbsp;

<p-calendar [styleClass]="‘dialog-datepick‘" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" inputStyleClass="form-control" name="beginTm" [(ngModel)]="query.beginTm" dateFormat="yy-mm-dd">

</p-calendar>

&nbsp;到&nbsp;

<p-calendar [styleClass]="‘dialog-datepick‘" [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2030" inputStyleClass="form-control" name="endTm" [(ngModel)]="query.endTm" dateFormat="yy-mm-dd">

</p-calendar>

</div>

<button type="submit" class="btn btn-primary">搜索</button>

</form>

</div>

<!--#dt引用，rows:每页显示多少条，paginator:是否分页，lazy:是否lazyload，totalRecords:总条数-->

<p-dataTable #dt [loading]="loading" [value]="wrRvRecs" [lazy]="true" [rows]="itemsPerPage" [paginator]="true" [totalRecords]="totalRecords"

emptyMessage="没有记录" (onLazyLoad)="lazyLoad($event)">

<p-column header="序号" [sortable]="false" [style]="{‘width‘:‘50px‘}">

<template let-rowIndex="rowIndex" pTemplate="body">

<span>{{rowIndex+1}}</span>

</template>

</p-column>

<p-column field="rvRecId" header="巡河记录ID" [hidden]="true"></p-column>

<p-column field="rvSegNm" header="河段名称" [style]="{‘width‘:‘300px‘}"></p-column>

<p-column field="rvSt" header="巡河进度" [style]="{‘width‘:‘110px‘}" [hidden]="true"></p-column>

<p-column field="empId" header="巡河人ID" [hidden]="true"></p-column>

<p-column field="empNm" header="巡河人" [style]="{‘width‘:‘100px‘}"></p-column>

<!--sortable是否可排序，template格式化-->

<p-column field="begTm" header="巡河日期" [style]="{‘width‘:‘150px‘}">

<template let-col let-wrRvRec="rowData" pTemplate="body">

{{wrRvRec[col.field] | date:‘yyyy-MM-dd‘}}

</template>

</p-column>

<p-column field="begTm" header="开始时间" [style]="{‘width‘:‘180px‘}">

<template let-col let-wrRvRec="rowData" pTemplate="body">

{{wrRvRec[col.field] | date:‘yyyy-MM-dd HH:mm:ss‘}}

</template>

</p-column>

<!--<p-column field="creTm" header="创建时间" [hidden]="true">

<template let-col let-wrRvRec="rowData" pTemplate="body">

{{wrRvRec[col.field] | date:‘yyyy-MM-dd HH:mm:ss‘}}

</template>

</p-column>

<p-column field="endTm" header="结束时间" [hidden]="true">

<template let-col let-wrRvRec="rowData" pTemplate="body">

{{wrRvRec[col.field] | date:‘yyyy-MM-dd HH:mm:ss‘}}

</template>

</p-column>-->

<p-column field="wl" header="巡河时长(秒)" [style]="{‘width‘:‘150px‘}" [hidden]="true"></p-column>

<p-column field="times" header="巡河时长" [style]="{‘width‘:‘160px‘}"></p-column>

<p-column field="dis" header="巡河路程(公里)" [style]="{‘width‘:‘150px‘}"></p-column>

<p-column field="bujianCount" header="记录部件数量" [style]="{‘width‘:‘150px‘}"></p-column>

<p-column styleClass="col-button" header="操作" [style]="{‘width‘:‘150px‘}">

<template let-wrRvRec="rowData" pTemplate="body">

<button type="button" pButton label="详细" (click)="loadView(wrRvRec.rvRecId)"></button>

</template>

</p-column>

</p-dataTable>

</div>

</div>

时间： 2024-11-08 01:07:06

angular2之父子组件的调用的相关文章

Angular2 之父子组件交互方式

父子组件交互方式,这里介绍主要的三种方式 1.事件传值 下面以列表页和分页组件举例. list.component.html 1 <pagination *ngIf="pageParams?.total>0" [pageParams]="pageParams" (changePageData)="changePageData($event)"></pagination>2 /* 这里的ngIf是为了控制total,当

小程序开发 组件定义(封装)、组件调用、父子组件方法调用、父子组件传值通讯

在小程序开发中,为了提高代码效率,和代码使用率,我们也用到了组件封装, 今天我介绍下如何在小程序中封装一个头部公用组件 首先,所有父组件(调用页面)的json文件都要引用子组件:index.json { "usingComponents": { "header": "../../component/header/header", } } 一,组件定义(封装) 子组件:header.wxml <view name='header' class

vue2 调用非父子组件方法的方式

今天用vue2 折腾spa的时候,遇到了这样的一个问题,有两个组件A和B,A和B不是父子组件,但是我需要在B组件中调用A组件的方法,官方文档找不到合适的答案,网上的相关资料也很少(原谅我懒得去FQGoogle). 一番折腾之后,我想到ES6的基本语法,可以通过引入模块去调用方法,于是,我在B组件中以模块的方式引入了A组件,然后直接调用B组件的方法,成功了! 举个例子,A组件的methods里有一个add方法. 那我再B组件脚本开头引入 //B模块 import A from 'A的相对路径' 然

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

React 组件基本使用(3) ---父子组件之间的通信

当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件传给它的函数给父组件传递数据. 很简单的一个例子,我们在输入框中输入温度,输入框下面显示冷和热.这里就有两个组件,输入框和它下面的显示内容,且它们共享一个状态,就是温度.所以我们要把温度这个状态放到这两个组件的父组件中.这里就有三个组件,一个输入框TemperatureInput,  一个是显示内容

Vuejs——（10）组件——父子组件通信

版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 (二十七)父子组件通信 ①访问子组件.父组件.根组件: this.$parent    访问父组件 this.$children   访问子

第四节：Vue表单标签和组件的基本用法，父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

vue 自定义组件 v-model双向绑定、 父子组件同步通信

父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-model 第一种曾经被废除过,由于维护成本的原因被删掉,但经过证实,确实有存在的意义,又被加上. 第一种: 父组件: <template> <div> <aa cl

vue2.0父子组件以及非父子组件如何通信

1.父组件 >>> 子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child> //这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { chi