Estou usando @input
para 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 false
do 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.
É @input
o caso de uso adequado para este cenário? Por favor me ajude a corrigir isso. (Por favor, atualize o êmbolo).
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.
deixe-me dizer algumas palavras