Atualizar propriedade do componente pai do componente filho no Angular 2

Corpo:

Estou usando @inputpara receber uma propriedade do componente pai para ativar uma classe CSS em um dos elementos do componente filho.

Consigo receber a propriedade dos pais e também ativar a classe. Mas isso funciona apenas uma vez. A propriedade que estou recebendo do pai é um dado booleano digitado e quando eu defino o status dele como falsedo componente filho, ele não muda no pai.

Plunkr: https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview

app.ts

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HeaderComponent } from './header';
import { SearchComponent } from './header/search';

@Component({
  selector: 'my-app',
  template: `
    <app-header></app-header>
  `,
})
export class App {
  name:string;
  constructor() {
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, HeaderComponent, SearchComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

header.ts

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

@Component({
  selector: 'app-header',
  template: `<header>
              <app-search [getSearchStatus]="isSearchActive"></app-search>
              <button (click)="handleSearch()">Open Search</button>
            </header>`
})
export class HeaderComponent implements OnInit {
  isSearchActive = false;

  handleSearch() {
    this.isSearchActive = true
    console.log(this.isSearchActive)
  }

  constructor() { }
  ngOnInit() { }
}

header / search.ts

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

@Component({
  selector: 'app-search',
  template: `<div id="search" [class.toggled]="getSearchStatus">
              search 
              <button  (click)="getSearchStatus = false" class="close">Close Search</button>
            </div>`
})
export class SearchComponent implements OnInit {
  @Input() getSearchStatus: boolean;

  constructor() { }

  ngOnInit() {

  }
}

Verifique o êmbolo fornecido acima. A função de pesquisa aberta funciona apenas uma vez. Depois de fechar a pesquisa, ela não aciona novamente.

É @inputo caso de uso adequado para este cenário? Por favor me ajude a corrigir isso. (Por favor, atualize o êmbolo).

n00dl3:

Você precisa usar a vinculação de dados de 2 vias.

@Input()é uma ligação de dados unilateral. para habilitar a vinculação de dados bidirecional, você precisa adicionar um @Output()correspondente à propriedade, com um sufixo "Alterar"

@Input() getSearchStatus: boolean;
@Output() getSearchStatusChange = new EventEmitter<boolean>();

quando quiser publicar a alteração feita em sua propriedade para os pais, você precisa notificar os pais com:

this.getSearchStatusChange.emit(newValue)

e no pai você precisa usar a notação banana-in-a-box para essa propriedade:

[(getSearchStatus)]="myBoundProperty"

você também pode vincular à propriedade e acionar um retorno de chamada quando ele muda no filho:

[getSearchStatus]="myBoundProperty" (getSearchStatusChange)="myCrazyCallback($event)"

veja o plnkr

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em
0

deixe-me dizer algumas palavras

0comentários
loginDepois de participar da revisão

Artigos relacionados

Como atualizar o componente pai do componente filho no Angular 2

Angular 2 ngModel no componente filho atualiza a propriedade do componente pai

Atualizar o componente filho do pai no Angular

propriedade do componente filho do angular 2 access do componente pai

Atualizar o título do componente pai do componente filho roteado no Angular 2

(VueJS) Atualizar dados pai do componente filho

Não é possível atualizar a vista do componente filho do pai no angular 2

Angular 2 - Roteamento do componente `primeiro filho` para um componente` segundo filho` de um componente pai

Angular 2: Vinculação de propriedade do componente pai-filho

Atualizar o componente React pai do componente filho

Angular para atualizar a IU do componente filho reflete o valor para o componente pai

Angular 2 passando dados do componente pai para o filho

Como atualizar o estado do pai do componente filho no reactJS

Como acessar os valores do elemento HTML do componente filho no componente pai do angular2?

Modal Angular 2 ng2-bootstrap dentro do componente filho chamado do componente pai

Evento Angular HostListener do componente filho para o componente pai

Como redefinir um campo no componente filho do componente pai - angular

roteador angular como chamar o componente filho do componente pai

Como obter o nome do componente Pai no componente Filho do angular 2?

Angular 2: valida os campos de formulário do componente filho do componente pai

Passando o objeto do servidor do componente pai para o componente filho angular2

como usar o componente do módulo pai no componente do módulo filho no angular2

Como acionar a referência local no componente pai a partir do evento do componente filho no Angular 2?

Angular 7 - acesse a propriedade dinâmica do filho do componente pai

Reage atualizar o estado filho do componente pai

Problema ao atualizar o estado pai do componente filho no React

Atualizar componentes pai do componente filho em Vue.js

Como atualizar a matriz de estado pai do componente filho?

Atualizar o estado pai do componente filho de terceiros