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

ng g component components/home

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

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

}

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

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

}

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

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

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

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

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

// 引入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()
  }
}

//这里我们需要引入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方法")
  }
}

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

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