1.JQuery的三种引入方式
1.1.方式1
1.1.1.输入命令：
npm install --save jquery
npm install @types/jquery --save
1.1.2.在ts文件头部添加：
import * as $ from 'jquery';
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.2.2.在各个组件中，使用如下代码即可：
declare let $: any;
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.3.2.在各个组件中，使用如下代码即可：
declare let $: any;
2.组件-父子组件
2.1.父组件向子组件传值
2.1.1.父组件
HTML：
<app-mode-one [windowHeightRight]="windowHeightRight"></app-mode-one>
ts:
windowHeightRight: number = $(window).height();
2.1.2.子组件
HTML:
<div class="modal-body" [style.height]="oneHeight"></div>
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';
}
}
}
}
}
【说明】： OnChanges类用于父组件传值监听，如果windowHeightRight发生变化，则会调用ngOnChanges方法。
TS(方式二：@Input结合setter):
private _value = '';
@Input('value')
set value(value: string) {
this._value = value; //在此处可以对输入值进行处理
}
get value(): string{
return this._value;
}
2.2.子组件调用父组件的方法
特别说明：子组件向父组件传值，也是通过该种方式完成的。
2.2.1.子组件
HTML
<div style="width: 20%"><a (click)="queryNextList()">Next Page</a></div>
TS
import {
Component, Input, OnInit, Output, EventEmitter} from '@angular/core';
@Output() private nextPage = new EventEmitter<string>();
queryNextList() {
this.nextPage.emit('1');
}
说明：@Output()需要引入，作用是对外提供方法；nextPage为对外使用的方法名称；
2.2.2.父组件
HTML
<app-table-paging (nextPage)="queryTestWebListNext($event)"></app-table-paging>
说明：调用子组件方法，需要使用小括号；调用的方法名称需要在子组件中定义号，且名称保持一致；
TS
queryTestWebListNext(msg: string) {
console.log(msg);
if (this.pageNum < this.pageTotal) {
this.pageNum = this.pageNum + 1;
this.queryTestWebList();
}
}
2.3.父组件调用子组件的方法
2.3.1.方式一：使用控制器
2.3.1.1.子组件
HTML
<div><p class="show-p"></p></div>
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);
}
}
说明：向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>
说明：#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');
}
说明：需要引入子组件，使用@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>
直接在click中调用即可。