组件介绍
什么是组件
组件是 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)
}
}