Ich verwende @input
, um eine Eigenschaft von der übergeordneten Komponente zu erhalten, um eine CSS-Klasse in einem Element der untergeordneten Komponente zu aktivieren.
Ich kann die Eigenschaft vom Elternteil erhalten und auch die Klasse aktivieren. Das funktioniert aber nur einmal. Die Eigenschaft, die ich vom übergeordneten Element erhalte, sind boolesche Daten, die eingegeben werden. Wenn ich den Status false
von der untergeordneten Komponente auf setze , ändert sich dies nicht im übergeordneten Element.
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() {
}
}
Bitte überprüfen Sie den oben angegebenen Plunker. Die offene Suchfunktion funktioniert nur einmal. Nach dem Schließen der Suche wird sie nicht erneut ausgelöst.
Ist @input
der richtige Anwendungsfall für dieses Szenario? Bitte helfen Sie mir, dies zu beheben. (Bitte aktualisieren Sie den Plunker).
quelle
true
in gesetzt wurdehandleSearch()
?Antworten:
Sie müssen die bidirektionale Datenbindung verwenden.
@Input()
ist eine Möglichkeit zur Datenbindung. Um die bidirektionale Datenbindung zu aktivieren, müssen Sie@Output()
der Eigenschaft ein entsprechendes Suffix "Ändern" hinzufügen@Input() getSearchStatus: boolean; @Output() getSearchStatusChange = new EventEmitter<boolean>();
Wenn Sie die an Ihrer Immobilie vorgenommenen Änderungen für das übergeordnete Element veröffentlichen möchten, müssen Sie das übergeordnete Element benachrichtigen mit:
this.getSearchStatusChange.emit(newValue)
und im übergeordneten Element müssen Sie die Banana-in-a-Box-Notation für diese Eigenschaft verwenden:
Sie können auch an die Eigenschaft binden und einen Rückruf auslösen, wenn sich das untergeordnete Element ändert:
siehe die plnkr
quelle
@Output()
. Das klingt nach einer Neueinstellung des Rades. @ RobertVangorpublic
konnte ich den "Banana Box" -Ansatz nicht verwenden , obwohl mein untergeordnetes Objekt markiert war. Es wurden Fehler angezeigt, dass es sich nicht um eine bekannte Eigenschaft der Komponente handelte. Die Bindung nur an das(propertyChanged)="setParentProp($event)"
funktionierte jedoch perfekt.Ein anderer Ansatz: Verwenden Sie rxjs / BehaviorSubject, um den Status zwischen verschiedenen Komponenten zu übergeben.
Hier ist der Plunkr .
Ich benenne den Betreff mit dem Suffix 'Rxx', daher lautet das BehaviorSubject für searchStatus searchStatusRxx.
searchStatusRxx = new BehaviorSubject(false);
,searchStatusRxx.next(value)
ändern Sie den neuesten Wert.quelle
Sie haben Ihren Code ein wenig bearbeitet, er funktioniert und sieht imo einfacher aus. Sag mir, ob Du es magst.
https://plnkr.co/edit/oJOjEZfAfx8iKZmzB3NY?p=preview
quelle
Noch ein anderer Weg. Plunkr . Was wir wollen, ist eine einzige Quelle der Wahrheit. Wir können das diesmal in Kind setzen.
searchStatus = false
#as
oder wie auch immer ab.#as.searchStatus
und im untergeordneten Elementthis.searchStatus
.quelle