El aprendizaje angular habla sobre la comunicación de los componentes y el ciclo de vida de los componentes.

Comunicación de componentes

1. Pase datos al componente

<app-favorite [isFavorite]="true"></app-favorite>

// favorito.component.ts
importar {Entrada} desde '@angular/core';
exportar clase Componente Favorito {
    @Input() esFavorito: booleano = falso;
}

[Recomendación del tutorial relacionado: "tutorial angular"]

Nota: Agregar [] fuera del atributo significa vincular un valor dinámico después de recibirlo en el componente, es de tipo booleano. No agregar [] significa vincular un valor normal. en el componente, es字符串类型.

<app-favorite [is-Favorite]="true"></app-favorite>

importar {Entrada} desde '@angular/core';

exportar clase Componente Favorito {
  @Input("es-Favorito") esFavorito: booleano = falso
}

2. El componente

necesita transferir datos al exterior: pase los datos al componente principal haciendo clic en el botón en el subcomponente

<!-- Plantilla de subcomponente-->
<button (click)="onClick()">click</button>

// Importación de clase de subcomponente { EventEmitter, Output } desde "@angular/core"

exportar clase Componente Favorito {
  @Output() cambio = nuevo EventEmitter()
  al hacer clic() {
    this.change.emit({ nombre: "Zhang San" })
  }
}

<!-- Plantilla de componente principal -->
<app-favorite (change)="onChange($event)"></app-favorite>

// Clase de componente principal clase de exportación AppComponent {
  onChange(evento: { nombre: cadena }) {
    consola.log(evento)
  }
}

Ciclo de vida del componente

1. Fase de montaje

La función de ciclo de vida de la fase de montaje solo se ejecuta una vez durante la fase de montaje y ya no se ejecuta cuando se actualizan los datos.

1). El constructor

Angular se ejecuta al crear una instancia de la clase de componente y puede usarse para recibir el objeto de instancia de servicio inyectado por Angular.

exportar clase ChildComponent {
  constructor (prueba privada: TestService) {
    console.log(this.test) // "prueba"
  }
}

2), ngOnInit

se ejecuta después de recibir el valor del atributo de entrada por primera vez, y la operación solicitada se puede realizar aquí.

<app-child name="Zhang San"></app-child>

clase de exportación ChildComponent implementa OnInit {
  @Input("nombre") nombre: cadena = ""
  ngOnInit() {
    console.log(este.nombre) // "Zhang San"
  }
}

3),

se llama a ngAfterContentInit después de que se completa la representación inicial de la proyección de contenido.

<aplicación-niño>
	<div #box>Hola Angular</div>
</app-child>

clase de exportación ChildComponent implementa AfterContentInit {
  @ContentChild("cuadro") cuadro: ElementRef<HTMLDivElement> indefinido |

  ngAfterContentInit() {
    console.log(this.box) // <div>Hola Angular</div>
  }
}

4),

se llama a ngAfterViewInit después de representar la vista del componente.

<!-- plantilla de componente secundario de la aplicación -->
<p #p>app-child funciona</p>

clase de exportación ChildComponent implementa AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> indefinido |
  ngAfterViewInit () {
    console.log(this.p) // <p>app-child funciona</p>
  }
}

2. Fase de actualización

1), ngOnChanges

• se ejecuta cuando cambia el valor del atributo de entrada y también se ejecuta una vez durante la configuración inicial. El orden es mejor que ngOnInit

• No importa cuántos atributos de entrada cambien al mismo tiempo, la función de enlace cambiará. Solo se ejecutará una vez y los valores modificados se almacenarán al mismo tiempo. En los parámetros,

• el tipo de parámetro es SimpleChanges y el tipo de subpropiedad es SimpleChange.

• Para los tipos de datos básicos, se puede detectar siempre que. cambios de valor

• Para los tipos de datos de referencia, puede detectar cambios de un objeto a otro, pero la detección no puede. Los cambios en los valores de propiedad en el mismo objeto no afectan los datos de actualización de la plantilla del componente.

El valor del tipo de datos básicos cambia

<app-child [name]="name" [age]="age"></app-child>
<botón (hacer clic)="cambiar()">cambiar</botón>

exportar clase AppComponent {
  nombre: cadena = "Zhang San";
  edad: número = 20
  cambiar() {
    this.name = "李思"
    esta.edad = 30
  }
}

clase de exportación ChildComponent implementa OnChanges {
  @Input("nombre") nombre: cadena = ""
  @Input("edad") edad: número = 0

  ngOnChanges(cambios: CambiosSimples) {
    console.log("Se pueden detectar cambios en los valores de los tipos de datos básicos")
  }
}

Cambio de tipo de datos de referencia

<app-child [person]="person"></app-child>
<botón (hacer clic)="cambiar()">cambiar</botón>

exportar clase AppComponent {
  persona = {nombre: "张三", edad: 20}
  cambiar() {
    esta.persona = { nombre: "李思", edad: 30 }
  }
}

clase de exportación ChildComponent implementa OnChanges {
  @Input("persona") persona = { nombre: "", edad: 0 }

  ngOnChanges(cambios: CambiosSimples) {
    console.log("Para tipos de datos de referencia, solo se pueden detectar cambios en la dirección de referencia, no se pueden detectar cambios en los atributos del objeto")
  }
}

2), ngDoCheck: se utiliza principalmente para depurar, siempre que los atributos de entrada cambien, ya sea un tipo de datos básico, un tipo de datos de referencia o un cambio de atributo en un tipo de datos de referencia, se ejecutará.

3), ngAfterContentChecked: se ejecuta después de que se completa la actualización de la proyección de contenido.

4), ngAfterViewChecked: se ejecuta después de actualizar la vista del componente.

3. Fase de desinstalación

1),

se llama a ngOnDestroy antes de que se destruya el componente y se utiliza para operaciones de limpieza.

clase de exportación HomeComponent implementa OnDestroy {
  ngOnDestroy() {
    console.log("El componente fue desinstalado")
  }
}