文章目录
前文回顾
组件介绍
什么是组件
创建一个组件
- 命令行
ng g component components/home
- 创建成功
更改默认启动页内容
- 更改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====>")
}
}
> 这里我是有些偷懒的，因为我看了官网的解释以后，我自己不太能知道怎么再使用我自己的语言重新给你们描述一次，你们可以选择直接看我的这个demo，简单暴力，也可以选择看一下官方的解释，本身就是白话文，所以就没有翻译的必要了。angular生命周期
组件之间传值
父子之间传值
- 当前的结构是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>
- 实现效果：
传递整个父组件
在父组件的视图层文件中实现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()
}
}
- 执行效果
子组件传值(函数)给父组件
方案一 通过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)
}
}
- 执行效果：
