Angualr8的使用(一):JQuery和组件_declare let $: any;

1.JQuery的三种引入方式

1.1.方式1

1.1.1.输入命令：

npm install --save jquery
npm install @types/jquery --save
1
2

1.1.2.在ts文件头部添加：

import * as $ from 'jquery';
1

1.2.引中入外部文件(一)

1.2.1.在index.html引中入外部文件jquery.min.js

前提：在./assets/js/目录下添加jquery.min.js文件

<script type="text/javascript" src="./assets/js/jquery.min.js"></script>
1

1.2.2.在各个组件中，使用如下代码即可：

declare let $: any;
1

1.3.引中入外部文件(二)

1.3.1.或者在angular.json(angular-cli.json)的scripts中引入jquery.min.js

前提：执行1.1.1的两行命令

"scripts": [
 "./node_modules/jquery/dist/jquery.js"
]
1
2
3

1.3.2.在各个组件中，使用如下代码即可：

declare let $: any;
1

2.组件-父子组件

2.1.父组件向子组件传值

2.1.1.父组件

HTML：

<app-mode-one [windowHeightRight]="windowHeightRight"></app-mode-one>
1

ts:

windowHeightRight: number = $(window).height();
1

2.1.2.子组件

HTML:

<div class="modal-body" [style.height]="oneHeight"></div>
1

TS(方式一：@Input和OnChanges):

import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';

export class ModeOneComponent implements OnInit, OnChanges {
	oneHeight  = '';
	@Input('windowHeightRight') windowHeightRight: number;
	ngOnChanges(changes: SimpleChanges): void {    //通过OnChanges钩子进行监听，对输入值进行特殊处理；如果不需要处理，则不需使用OnChanges
    for (const propName in changes) {
    	if ('windowHeightRight' === propName) {
        const propValue = changes[propName];
        if ( !propValue.isFirstChange() ) {
         	 this.oneHeight = this.windowHeightRight * 0.5 + 'px';
        }
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

【说明】： OnChanges类用于父组件传值监听，如果windowHeightRight发生变化，则会调用ngOnChanges方法。

TS(方式二：@Input结合setter):

private _value = '';
@Input('value')
set value(value: string) {
	this._value = value;   //在此处可以对输入值进行处理
}
get value(): string{
	return this._value;
}
1
2
3
4
5
6
7
8

2.2.子组件调用父组件的方法

特别说明：子组件向父组件传值，也是通过该种方式完成的。

2.2.1.子组件

HTML

<div style="width: 20%"><a (click)="queryNextList()">Next Page</a></div>
1

TS

import {Component, Input, OnInit, Output, EventEmitter} from '@angular/core';

@Output() private nextPage = new EventEmitter<string>();
queryNextList() {
    this.nextPage.emit('1');
  }
1
2
3
4
5
6

说明：@Output()需要引入，作用是对外提供方法；nextPage为对外使用的方法名称；

2.2.2.父组件

HTML

<app-table-paging  (nextPage)="queryTestWebListNext($event)"></app-table-paging>
1

说明：调用子组件方法，需要使用小括号；调用的方法名称需要在子组件中定义号，且名称保持一致；
TS

queryTestWebListNext(msg: string) {
	console.log(msg);
    if (this.pageNum < this.pageTotal) {
      this.pageNum = this.pageNum + 1;
      this.queryTestWebList();
    }
  }
1
2
3
4
5
6
7

2.3.父组件调用子组件的方法

2.3.1.方式一：使用控制器

2.3.1.1.子组件

HTML

<div><p class="show-p"></p></div>
1

TS

import { Component, OnInit } from '@angular/core';

declare let $: any;

@Component({
  selector: 'app-mode-two',
  templateUrl: './mode-two.component.html',
  styleUrls: ['./mode-two.component.scss']
})
export class ModeTwoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  addMsg2P(msg: string) {
    $('.show-p').html(msg);
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

说明：向p标签中添加msg；addMsg2P为对外的方法；

2.3.1.2.父组件

HTML

<button type="button" class="btn btn-primary" (click)="ShowP()">Show-P</button>
  <app-mode-two #modeTwo></app-mode-two>
1
2

说明：#modeTwo为调用模块的ID，在TS中定义；点击【Show-P】按钮，会调用TS中的ShowP方法

TS

import {ModeTwoComponent} from '../modal/mode-two/mode-two.component';

@ViewChild('modeTwo')
  modeTwo: ModeTwoComponent

ShowP() {
    this.modeTwo.addMsg2P('hahaha');
  }
1
2
3
4
5
6
7
8

说明：需要引入子组件，使用@ViewChild进行定义，定义的名称需要和HTML中[#]后面的保持一致；这个时候，定义出来的模块modeTwo中的方法在父模块中将被直接使用。

2.3.2.方式二：使用模板

2.3.2.1.子组件

如[2.3.1]雷同

2.3.2.2.父组件

HTML

<button type="button" class="btn btn-primary" (click)="modeTwo.addMsg2P('qwerty')">Show-P2</button>
  <app-mode-two #modeTwo></app-mode-two>
1
2

直接在click中调用即可。