O aprendizado angular fala sobre comunicação de componentes e ciclo de vida de componentes

Comunicação de componentes

1. Passe os dados para o componente

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

// favorite.component.ts
importar {Input} de '@angular/core';
exportar classe FavoriteComponent {
    @Input() éFavorite: boolean = false;
}

[Recomendação do tutorial relacionado: "tutorial angular"]

Nota: Adicionar [] [] do atributo significa vincular um valor dinâmico. Após recebê-lo no componente, é um tipo booleano. no componente, é字符串类型.

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

importar {Input} de '@angular/core';

exportar classe FavoriteComponent {
  @Input("is-Favorite") isFavorite: boolean = false
}

2. O componente

precisa transferir dados para o exterior: passe os dados para o componente pai clicando no botão no subcomponente

<!-- Sub-component template-->
<button (click)="onClick()">click</button>

// Classe de subcomponente import { EventEmitter, Output } from "@angular/core"

exportar classe FavoriteComponent {
  @Output() alteração = novo EventEmitter()
  onClick() {
    this.change.emit({ nome: "Zhang San" })
  }
}

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

// Classe do componente pai export class AppComponent {
  onChange(evento: { nome: string }) {
    console.log(evento)
  }
}

Ciclo de vida do componente

1. Fase de montagem

A função de ciclo de vida da fase de montagem é executada apenas uma vez durante a fase de montagem e não é mais executada quando os dados são atualizados.

1) O construtor

Angular é executado ao instanciar a classe do componente e pode ser utilizado para receber o objeto da instância de serviço injetado pelo Angular.

classe de exportação ChildComponent {
  construtor (teste privado: TestService) {
    console.log(this.test) // "teste"
  }
}

2), ngOnInit

é executado após receber o valor do atributo de entrada pela primeira vez e a operação solicitada pode ser executada aqui.

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

classe de exportação ChildComponent implementa OnInit {
  @Input("nome") nome: string = ""
  ngOnInit() {
    console.log(este.nome) // "Zhang San"
  }
}

3), ngAfterContentInit

é chamado após a conclusão da renderização inicial da projeção do conteúdo.

<app-filho>
	<div #box>Olá Angular</div>
</app-child>

classe de exportação ChildComponent implementa AfterContentInit {
  @ContentChild("caixa") caixa: ElementRef<HTMLDivElement> |

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

4), ngAfterViewInit

é chamado depois que a visualização do componente é renderizada.

<!-- modelo de componente app-child -->
<p #p>app-child funciona</p>

classe de exportação ChildComponent implementa AfterViewInit {
  @ViewChild("p") p: ElementRef<HTMLParagraphElement> |
  ngAfterViewInit () {
    console.log(this.p) // <p>app-child funciona</p>
  }
}

2. Fase de atualização

1), ngOnChanges

é executado quando o valor do atributo de

• entrada

• muda e também é executado uma vez durante a configuração inicial. A ordem é melhor que ngOnInit.

• será executado apenas uma vez e os valores alterados serão armazenados ao mesmo tempo. Nos parâmetros,

• o tipo de parâmetro é SimpleChanges e o tipo de subpropriedade é SimpleChange.

• Para tipos de dados básicos, pode ser detectado desde que o. alterações de valor

• . Para tipos de dados de referência, ele pode detectar alterações de um objeto para outro, mas a detecção não pode. Alterações nos valores de propriedade no mesmo objeto não afetam os dados de atualização do modelo de componente.

Alterações básicas no valor do tipo de dados

<app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">alterar</button>

exportar classe AppComponent {
  nome: string = "Zhang San";
  idade: número = 20
  mudar() {
    this.name = "李思"
    esta.idade = 30
  }
}

classe de exportação ChildComponent implementa OnChanges {
  @Input("nome") nome: string = ""
  @Input("idade") idade: número = 0

  ngOnChanges(mudanças: SimpleChanges) {
    console.log("Alterações nos valores básicos dos tipos de dados podem ser detectadas")
  }
}

Alteração do tipo de dados de referência

<app-child [person]="person"></app-child>
<button (click)="change()">alterar</button>

exportar classe AppComponent {
  pessoa = { nome: "张三", idade: 20 }
  mudar() {
    this.person = {nome: "李思", idade: 30 }
  }
}

classe de exportação ChildComponent implementa OnChanges {
  @Input("pessoa") pessoa = { nome: "", idade: 0 }

  ngOnChanges(mudanças: SimpleChanges) {
    console.log("Para tipos de dados de referência, apenas alterações no endereço de referência podem ser detectadas, alterações nos atributos do objeto não podem ser detectadas")
  }
}

2), ngDoCheck: usado principalmente para depuração, desde que os atributos de entrada mudem, seja um tipo de dados básico, um tipo de dados de referência ou uma alteração de atributo em um tipo de dados de referência, ele será executado.

3), ngAfterContentChecked: executado após a conclusão da atualização da projeção de conteúdo.

4), ngAfterViewChecked: Executado após a atualização da visualização do componente.

3. Fase de desinstalação

1), ngOnDestroy

é chamado antes que o componente seja destruído e usado para operações de limpeza.

classe de exportação HomeComponent implementa OnDestroy {
  ngOnDestroy() {
    console.log("Componente foi desinstalado")
  }
}