मैं @inputमूल घटक से एक संपत्ति प्राप्त करने के लिए उपयोग कर रहा हूं ताकि चाइल्ड घटक के तत्व में एक सीएसएस वर्ग को सक्रिय किया जा सके।
मैं माता-पिता से संपत्ति प्राप्त करने में सक्षम हूं और वर्ग को भी सक्रिय कर रहा हूं। लेकिन यह केवल एक बार काम करता है। माता-पिता से प्राप्त संपत्ति मैं टाइप किया गया बूलियन डेटा है और जब मैंने इसे falseचाइल्ड कंपोनेंट से सेट किया है , तो यह पैरेंट में नहीं बदलता है।
प्लंकर: 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 {}
शीर्ष लेख
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() { }
}
हेडर / सर्च.टीएस
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() {
}
}
कृपया ऊपर दिए गए प्लंकर की जांच करें। खुला खोज फ़ंक्शन केवल एक बार काम करता है। खोज बंद करने के बाद, यह फिर से ट्रिगर नहीं होता है।
क्या @inputइस परिदृश्य के लिए उचित उपयोग मामला है? कृपया इसे ठीक करने में मेरी मदद करें। (कृपया प्लंकर को अपडेट करें)।
trueथाhandleSearch()?