generate - Actualizar la propiedad del componente primario del componente secundario en Angular 2

router.navigate angular 5

Question

Estoy usando @input para recibir una propiedad del componente primario para activar una clase CSS en uno de los elementos del componente secundario.

Puedo recibir la propiedad del padre y también activar la clase. Pero esto funciona solo una vez. La propiedad que estoy recibiendo del padre es un tipo de datos booleanos y cuando configuro el estado del componente hijo en false , no cambia en el padre.

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() {

  }
}

Por favor verifique el plunker dado arriba. La función de búsqueda abierta funciona solo una vez. Después de cerrar la búsqueda, no se activa nuevamente.

¿ @input es el caso de uso adecuado para este escenario? Por favor ayúdame a arreglar esto. (Actualice el plunker).

Answer 1

Debe utilizar el enlace de datos de 2 vías.

@Input() es un enlace de datos unidireccional. para habilitar el enlace de datos de 2 vías, debe agregar un @Output() correspondiente a la propiedad, con un sufijo "Cambiar"

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

cuando desee publicar el cambio realizado en su propiedad al padre, debe notificar al padre con:

this.getSearchStatusChange.emit(newValue)

y en el padre necesita usar la notación banana-in-a-box para esa propiedad:

[(getSearchStatus)]="myBoundProperty"

También puede enlazar a la propiedad y activar una devolución de llamada cuando cambie en secundario:

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

ver el plnkr

Answer 2

Editó su código un poco, funciona y parece más simple. Dime si te gusta.

https://plnkr.co/edit/oJOjEZfAfx8iKZmzB3NY?p=preview

Answer 3

Otra forma más. Plunkr Lo que queremos es una sola fuente de verdad. Podemos poner eso en niño esta vez.

• Init en hijo: searchStatus = false
• En la plantilla principal, obtenga la instancia de child como #as o como se #as .
• Cambie searchStatus en padre usando #as.searchStatus y en niño this.searchStatus .

Answer 4

Otro enfoque: use rxjs / BehaviorSubject para pasar el estado entre diferentes componentes.
Aquí está el plunkr .
Nombre al sujeto con el sufijo ''Rxx'', por lo que el BehaviorSubject para searchStatus será searchStatusRxx.

1. searchStatusRxx = new BehaviorSubject(false); en el componente principal como searchStatusRxx = new BehaviorSubject(false); ,
2. pasarlo al componente hijo usando @Input
3. en la plantilla secundaria, haces una tubería asíncrona.
4. en padre e hijo, realiza searchStatusRxx.next(value) para cambiar el último valor.