组件

组件定义

Angular当中的组件需要用@Component装饰器来标识这是一个组件每个组件必备的内容：

一个ts文件，里面定义一个class类
页面的html文件
css内容代码实现如下

import { Component } from '@angular/core';  // 从angular的核心里面引入 Component并使用 来声明这是一个组件

@Component({
  selector: 'app-index-componet', // 声明的当前组件名称
  standalone: true,
  imports: [],
  templateUrl: './index-componet.component.html', // 声明的当前组件html内容，也可以直接写成 '<p>html内容</p>'这样 css同样
  styleUrl: './index-componet.component.css' // 声明的当前组件css文件  
})
export class IndexComponetComponent {

}

组件的引用

在其他地方进行引用代码如下，比如在first-component这个组件里面引用index-component这个组件

import { Component } from '@angular/core';
import { IndexComponetComponent } from '../index-componet/index-componet.component' // 引入index组件
@Component({
  selector: 'app-first-component',
  standalone: true,
  imports: [IndexComponetComponent],  // import该组件
  templateUrl: './first-component.component.html',
  styleUrl: './first-component.component.css'
})
export class FirstComponentComponent {

}

html页面里面使用

<p>这里是首个组件的内容</p>
<app-index-componet></app-index-componet> <!-- 页面里面使用 -->

页面效果如图

组件的传参

1. 父子传参

还是上述组件，父传子的时候代码如下
首先，父组件ts文件定义要传的变量内容

indexData: string = "这是一段父传子的内容"

其次，在父页面的html文件增加这个变量并传值

  <app-index-componet [indexData]="indexData"></app-index-componet>

最后，在子组件里面引入Input这个依赖并且注入 @Input() 装饰器标记了一个子组件的属性，使其能够接收来自父组件的数据。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-index-componet',
  standalone: true,
  imports: [],
  templateUrl: './index-componet.component.html',
  styleUrl: './index-componet.component.css'
})
export class IndexComponetComponent {
  @Input() indexData: string = ''
}

然后在子页面里面进行使用

<p>这个是index子页面的内容</p>
<p>{{indexData}}</p>

效果如图

2. 调用子组件方法和修改值

父组件使用ViewChild这个依赖

import { Component, ViewChild } from '@angular/core';
@ViewChild('inxexComponent', { static: false }) _inxexComponent: any;

<app-index-componet #inxexComponent [indexData]="indexData"></app-index-componet>

使用ViewChild就建立了一个_indexComponent的一个子组件实例，这样就可以在此操作子组件当中的属性和方法例如

  indexClick(){
    this._inxexComponent.indexClick('向子组件传递的数据')
    console.log(`修改indexData1之前，${this._inxexComponent.indexData1}`,);
    this._inxexComponent.indexData1 = 'new'
    console.log(`修改indexData1之后，${this._inxexComponent.indexData1}`,);
  }

子组件当中定义好方法和字段即可

  export class IndexComponetComponent {
  @Input()
  indexData: string = ''
  indexData1: string = 'old'
  constructor(){

  }
  public indexClick(data: string){
    console.log(`父组件触发了子组件的事件，并且传递传递了数据, ${data}`)
  }
}

这样就定义了一个父子组件的方法和字段调用
效果如图

3. 子父传参和方法调用

首先在子页面引入 Output和EventEmitter两个装饰器，其次在页面定义和引用\
@Output()，该装饰器用于标记一个属性，表示该属性可以用于向外传递数据或者说把数据向父组件传递.使用了这个装饰器之后一般还需要使用EventEmitter来进行监听和触发。\
EventEmitter，是一个用于在 Angular 组件之间传递事件的泛型类，可以指定传递的数据类型。通过new EventEmitter()来创建一个新的实体类，然后通过this.xxx.emit(data)来进行触发和向父组件传递数据。\
子组件代码如下

  import { Component, Input, Output, EventEmitter } from '@angular/core';
  @Output() clickExportData: EventEmitter<string> = new EventEmitter()
  indexButton(data:string){
    this.clickExportData.emit(data)
  }

<button (click)="indexButton('这是一段子页面点击之后传到父页面的内容。')">子组件向父组件传参和方法调用按钮</button>

其次在父组件当中进行监听子组件的事件父组件代码如下

<app-index-componet #inxexComponent (clickExportData)="clickExportData($event)" [indexData]="indexData"></app-index-componet>   <!-- 页面里面使用 -->

clickExportData(data:string){
    console.log("parentPageString值变更前",this.parentPageString);
    this.parentPageString = data
    console.log("parentPageString值变更后",this.parentPageString);
  }