angular知识点梳理第三篇-组件

文章目录

• 前文回顾
• 组件介绍
  • 什么是组件
  • 创建一个组件
  • 更改默认启动页内容
  • 组件模块介绍
  • 组件的生命周期
  • 组件之间传值
  • 父子之间传值
• 父组件传值(函数)给子组件
  • 第一步：在parent组件的ts文件中 声明一个变量 【parent.component.ts】
  • 第二步：在父组件的html视图层文件中引入子组件 【parent.component.html】
  • 第三步：在子组件中的ts文件中使用@Input进行接收父组件的值 【children.component.ts】
  • 第四步：在子组件的视图层文件中进行变量值的获取 【children.component.html】
  • 传递整个父组件
  • 在父组件的视图层文件中实现this的传递 【parent.component.html】
  • 在子组件中进行@Input进行接收即可 【children.component.html】
• 子组件传值(函数)给父组件
  • 方案一 通过viewchild进行节点获取
  • 第一步：在父组件引入子组件的地方添加节点值 【parent.component.html】
  • 第二步：在子组件中声明一些需要传递的变量 【children.component.ts】
  • 第三步：在父组件的ts文件中引入viewchild模块 【parent.component.ts】
  • 方案二：通过@Output触发父组件的方法
  • 第一步：在子组件ts文件中引入angular的核心模块中的output和EventEmitter模块 【children.component.ts】
  • 第二步：在父组件的视图层引入子组件的地方进行函数名字的使用 【parent.component.html】
  • 第三步：在父组件的ts文件中进行函数和数据的执行 【parent.component.ts】
• 写到后面

前文回顾

第一篇的时候我们对angular进行了一个简单的介绍，主要是认识了angular以及如何创建一个angular的项目并启动它，因为不是视频，所以这里就不对上一篇文章做过多的解释，没看的直接移步到第一篇阅读！这篇文章主要是将angular的组件部分尽可能的梳理明白！

组件介绍

什么是组件

组件是 Angular 应用的主要构造块，这个是比较官方的解释，说白话就是完成一定功能的结构块，熟悉的vue框架的可能比较容易理解这句话，vue组件其实就是一个一个的vue文件，组件之间可以进行复用，可以进行数据的传递，不同组件共同构成了一个比较完整的结构化的项目，和vue的区别在于，因为angular的组件是分文件进行的，简单点说就是他分为：

• 一个 HTML 模板，用于声明页面要渲染的内容
• 一个用于定义行为的 Typescript 类
• 一个 CSS 选择器，用于定义组件在模板中的使用方式

vue因为是模版化比较严重的框架，所以vue本身一个vue文件就可以写完一个组件，这点是需要注意的！

创建一个组件

方便起见，我这里开始就使用vscode自带的终端进行项目的启动和组件的操作

• 命令行

代码语言：javascript复制

ng g component components/home

ps: 这里的指令是带有目录的，也就是说我们完全可以直接ng g home 也是可以直接创建一个组件的，但是他会直接出现在app的文件夹下面，这会导致我们在管理组件的时候不太容易管理，所以包括后面我创建组件的时候我也会默认创建到components这个文件夹下面。

• 创建成功

更改默认启动页内容

• 更改app.component.html文件内容

• 查看组件名字

• 启动项目

组件模块介绍

组件的生命周期

代码语言：javascript复制

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生命周期

组件之间传值

组件之间传值就是两个组件之间进行数据的交互，组件之间的关系比较多，比如父子组件之间传值，兄弟组件之间传值，下面我们就不同情况进行一个简单的梳理

父子之间传值

先搞明白什么算是父子组件，我们创建两个组件，分别是父组件和子组件，两个组件一个被另一个引入，被引入的一个就是子组件，引入的是父组件！父子组件之间传值只是相对的，不是绝对的！比如下面的例子中，根组件引入了parent组件，那么根组件就是父组件，parent组件就是子组件，parent组件引入了children组件，那么parent就是父组件，children就是子组件，他们是一种相对的关系！关系理清了，下面我们开始演示父子组件之间的传值

• 当前的结构是app引入了parent、parent引入了children

父组件传值(函数)给子组件

第一步：在parent组件的ts文件中 声明一个变量 【parent.component.ts】

代码语言：javascript复制

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】

代码语言：javascript复制

<p>我是父组件</p>
<!-- 引入子组件 -->
<!-- 这里的写法是 [msg] 是我们需要发送的变量，这里的名字可以自己定义，后面"msg"是我们ts文件中定义的变量 -->
<!-- 这里需要注意的是，我们传递给子组件函数的时候不可以加()，因为加上以后代表函数的执行 -->
<app-children [msg]="msg" [parentRun]="parentRun"></app-children>

第三步：在子组件中的ts文件中使用@Input进行接收父组件的值 【children.component.ts】

代码语言：javascript复制

//这里我们需要引入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】

代码语言：javascript复制

<!-- 直接使用{{}}进行变量值的获取，这里的写法和vue的基本是一致的 -->
<p>{{msg}}</p>
<!-- 这里和vue的区别在于，vue调用函数是需要@click，angular需要的是(click) 只是语法上的区别，执行过程是一致的 -->
<button (click)="run()">
    执行parentRun
</button>

• 实现效果：

传递整个父组件

解释一下，这里可能业务场景不太多，因为我也没实战过angular的项目，不太清楚这块是不是真的会有需要，不过这里还是要讲一下，整个父组件传递给子组件写法如下：

在父组件的视图层文件中实现this的传递 【parent.component.html】

代码语言：javascript复制

<!-- 这里的this 指的就是当前组件 home是自定义的 可以随意命名-->
<app-children [home]="this"></app-children>

在子组件中进行@Input进行接收即可 【children.component.html】

代码语言：javascript复制

//这里我们需要引入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】

代码语言：javascript复制

<!-- 这里给子组件起一个节点名字，为后续父组件获取该节点的值提供名字 -->
<app-children #childrenNode></app-children>
<button (click)="passfun()"> 执行子组件的childfunc方法</button>

第二步：在子组件中声明一些需要传递的变量 【children.component.ts】

代码语言：javascript复制

//这里我们需要引入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】

代码语言：javascript复制

// 引入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】

代码语言：javascript复制

//这里我们需要引入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】

代码语言：javascript复制

<!-- (childOut) 就是子组件中自己起的名字  $event可以写也可以不写，这里就是子组件传递的数据-->
<app-children (childOut)="parentInput($event)"></app-children>

第三步：在父组件的ts文件中进行函数和数据的执行 【parent.component.ts】

代码语言：javascript复制

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)
  }
}

• 执行效果：

这个不太理解没关系，直到方案一也是可以的，这个通过emit派发出去的其实和vue的$emit很相似，如果vue比较熟悉的话，这里可能相对容易理解一些，如果不是很熟悉的话，这里可能需要一些精力进行琢磨！

写到后面

这篇的篇幅已经有点长了，这里就不再进行写了，后面还有关于路由、以及请求的封装、Rxjs、Promise以及axios的使用，喜欢的关注一下，持续更新！

html typescript angularjs vue.js

0 人点赞