组件介绍
什么是组件
组件是 Angular 应用的主要构造块，这个是比较官方的解释，说白话就是完成一定功能的结构块，熟悉的vue框架的可能比较容易理解这句话，vue组件其实就是一个一个的vue文件，组件之间可以进行复用，可以进行数据的传递，不同组件共同构成了一个比较完整的结构化的项目，和vue的区别在于，因为angular的组件是分文件进行的，简单点说就是他分为：
- 一个 HTML 模板，用于声明页面要渲染的内容
- 一个用于定义行为的 Typescript 类
- 一个 CSS 选择器，用于定义组件在模板中的使用方式
vue因为是模版化比较严重的框架，所以vue本身一个vue文件就可以写完一个组件，这点是需要注意的！
创建一个组件
方便起见，我这里开始就使用vscode自带的终端进行项目的启动和组件的操作
- 命令行
ng g component components/home
ps: 这里的指令是带有目录的，也就是说我们完全可以直接ng g home 也是可以直接创建一个组件的，但是他会直接出现在app的文件夹下面，这会导致我们在管理组件的时候不太容易管理，所以包括后面我创建组件的时候我也会默认创建到components这个文件夹下面。
- 创建成功
更改默认启动页内容
- 更改app.component.html文件内容
- 查看组件名字
- 组件模块介绍
组件的生命周期
import {
Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.less']
})
export class HomeComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
console.log("ngOnInit====>")
}
ngOnChanges(){
console.log("ngonchanges====>")
}
ngDoCheck(){
console.log("ngdocheck====>")
}
ngAfterContentInit(){
console.log("ngaftercontentinit====>")
}
ngAfterContentChecked(){
console.log("ngaftercontentchecked====>")
}
ngAfterViewInit(){
console.log("ngafterviewinit====>")
}
ngAfterViewChecked(){
console.log("ngafterviewchecked====>")
}
ngOnDestroy(){
console.log("ngondestory====>")
}
}
组件之间传值
组件之间传值就是两个组件之间进行数据的交互，组件之间的关系比较多，比如父子组件之间传值，兄弟组件之间传值，下面我们就不同情况进行一个简单的梳理
父子之间传值
先搞明白什么算是父子组件，我们创建两个组件，分别是父组件和子组件，两个组件一个被另一个引入，被引入的一个就是子组件，引入的是父组件！父子组件之间传值只是相对的，不是绝对的！比如下面的例子中，根组件引入了parent组件，那么根组件就是父组件，parent组件就是子组件，parent组件引入了children组件，那么parent就是父组件，children就是子组件，他们是一种相对的关系！关系理清了，下面我们开始演示父子组件之间的传值
- 当前的结构是app引入了parent、parent引入了children
父组件传值(函数)给子组件
第一步：在parent组件的ts文件中 声明一个变量 【parent.component.ts】
import {
Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.less']
})
export class ParentComponent implements OnInit {
//声明一个需要传递给子组件的变量
public msg: string = "我是parent组件传递过来的msg"
constructor() {
}
ngOnInit(): void {
}
//声明一个需要传递给子组件的函数
parentRun(){
console.log("this is function of parent")
}
}
第二步：在父组件的html视图层文件中引入子组件 【parent.component.html】
<p>我是父组件</p>
<!-- 引入子组件 -->
<!-- 这里的写法是 [msg] 是我们需要发送的变量，这里的名字可以自己定义，后面"msg"是我们ts文件中定义的变量 -->
<!-- 这里需要注意的是，我们传递给子组件函数的时候不可以加()，因为加上以后代表函数的执行 -->
<app-children [msg]="msg" [parentRun]="parentRun"></app-children>
第三步：在子组件中的ts文件中使用@Input进行接收父组件的值 【children.component.ts】
//这里我们需要引入angular核心模块中的Input模块进行接收父组件的变量值
import {
Component, OnInit,Input } from '@angular/core';
@Component({
selector: 'app-children',
templateUrl: './children.component.html',
styleUrls: ['./children.component.less']
})
export class ChildrenComponent implements OnInit {
//使用@Input装饰器进行接收父组件的变量值
@Input() msg:any
//使用@Input装饰器接收父组件的函数
@Input() parentRun:any
constructor() {
}
ngOnInit(): void {
}
/**
* @function run 子组件本地函数
*/
run(){
//通过this进行执行父组件的函数
this.parentRun()
}
}
第四步：在子组件的视图层文件中进行变量值的获取 【children.component.html】
<!-- 直接使用{
{}}进行变量值的获取，这里的写法和vue的基本是一致的 -->
<p>{
{msg}}</p>
<!-- 这里和vue的区别在于，vue调用函数是需要@click，angular需要的是(click) 只是语法上的区别，执行过程是一致的 -->
<button (click)="run()">
执行parentRun
</button>
传递整个父组件
解释一下，这里可能业务场景不太多，因为我也没实战过angular的项目，不太清楚这块是不是真的会有需要，不过这里还是要讲一下，整个父组件传递给子组件写法如下：
在父组件的视图层文件中实现this的传递 【parent.component.html】
<!-- 这里的this 指的就是当前组件 home是自定义的 可以随意命名-->
<app-children [home]="this"></app-children>
在子组件中进行@Input进行接收即可 【children.component.html】
//这里我们需要引入angular核心模块中的Input模块进行接收父组件的变量值
import {
Component, OnInit,Input } from '@angular/core';
@Component({
selector: 'app-children',
templateUrl: './children.component.html',
styleUrls: ['./children.component.less']
})
export class ChildrenComponent implements OnInit {
//使用@Input装饰器接收整个父组件
@Input() home:any
constructor() {
}
ngOnInit(): void {
}
/**
* @function run 子组件本地函数
*/
run(){
console.log(this.home.msg)
this.home.parentRun()
}
}
以上就是父组件向子组件传值的方式，如果还有不明白的可以多看几遍！如果是第一次接触angular这样的框架，可能会有一些不太适应它的写法，不过没太大问题，习惯了她的写法就比较容易理解了！当然上面是传递的数据，其实方法也是可以进行传递的，上面的demo，子组件中执行父组件的方法也有对应的代码实现！
子组件传值(函数)给父组件
方案一 通过viewchild进行节点获取
第一步：在父组件引入子组件的地方添加节点值 【parent.component.html】
<!-- 这里给子组件起一个节点名字，为后续父组件获取该节点的值提供名字 -->
<app-children #childrenNode></app-children>
<button (click)="passfun()"> 执行子组件的childfunc方法</button>
第二步：在子组件中声明一些需要传递的变量 【children.component.ts】
//这里我们需要引入angular核心模块中的Input模块进行接收父组件的变量值
import {
Component, OnInit,Input } from '@angular/core';
@Component({
selector: 'app-children',
templateUrl: './children.component.html',
styleUrls: ['./children.component.less']
})
export class ChildrenComponent implements OnInit {
constructor() {
}
public childmsg:any = "我是子组件中即将被父组件进行获取的变量"
ngOnInit(): void {
}
childfunc(){
console.log("我是子组件的函数")
}
/**
* @function run 子组件本地函数
*/
run(){
this.home.parentRun()
console.log("this is run")
}
}
第三步：在父组件的ts文件中引入viewchild模块 【parent.component.ts】
// 引入angular核心模块的viewchild模块
import {
Component, OnInit,ViewChild } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.less']
})
export class ParentComponent implements OnInit {
//使用viewchild装饰器进行节点值的获取
@ViewChild('childrenNode') children:any
constructor() {
}
ngOnInit(): void {
}
//声明一个需要传递给子组件的函数
parentRun(){
//通过viewchild进行子组件数据的获取
console.log(this.children)
console.log(this.children.childmsg)
}
//父组件执行子组件的函数
passfun(){
this.children.childfunc()
}
}
方案二：通过@Output触发父组件的方法
这个方式就是同归广播的方式进行触发函数，将子组件中的数据主动传递到父组件中去
第一步：在子组件ts文件中引入angular的核心模块中的output和EventEmitter模块 【children.component.ts】
//这里我们需要引入angular核心模块中的Input模块进行接收父组件的变量值
import {
Component, OnInit,Input,Output,EventEmitter } from '@angular/core';
@Component({
selector: 'app-children',
templateUrl: './children.component.html',
styleUrls: ['./children.component.less']
})
export class ChildrenComponent implements OnInit {
constructor() {
}
//通过Output进行子组件给父组件传递数据 childOut 是自己随意起的名字
@Output() public childOut = new EventEmitter()
ngOnInit(): void {
}
//声明一个使用output方式传递数据的函数
passOutput(){
this.childOut.emit("我是子组件的output方法")
}
}
第二步：在父组件的视图层引入子组件的地方进行函数名字的使用 【parent.component.html】
<!-- (childOut) 就是子组件中自己起的名字 $event可以写也可以不写，这里就是子组件传递的数据-->
<app-children (childOut)="parentInput($event)"></app-children>
第三步：在父组件的ts文件中进行函数和数据的执行 【parent.component.ts】
import {
Component, OnInit,ViewChild } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.less']
})
export class ParentComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
//通过output进行子组件数据的获取
parentInput(e:any){
console.log("执行了....")
console.log(e)
}
}