angular - कोणीय 2 में बाल घटक से मूल घटक गुण को अद्यतन करें




typescript angular2-inputs (3)

अपने कोड को थोड़ा संपादित किया, यह काम करता है और सरल imo दिखता है। अच्छा लगे तो मुझे बताएं।

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

मैं मूल घटक से एक संपत्ति प्राप्त करने के लिए @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 {}

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

शीर्ष लेख / 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() {

  }
}

कृपया ऊपर दिए गए प्लंकर की जांच करें। खुला खोज फ़ंक्शन केवल एक बार काम करता है। खोज बंद करने के बाद, यह फिर से ट्रिगर नहीं होता है।

क्या @input इस परिदृश्य के लिए उचित उपयोग का मामला है? कृपया इसे ठीक करने में मेरी मदद करें। (कृपया प्लंकर को अपडेट करें)।


आपको 2 तरह से डेटा-बाइंडिंग का उपयोग करने की आवश्यकता है।

@Input() एक तरह से डेटा बाइंडिंग है। 2 तरह से डेटा-बाइंडिंग को सक्षम करने के लिए आपको "Change" प्रत्यय के साथ संपत्ति के अनुरूप @Output() जोड़ना होगा।

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

जब आप अपनी संपत्ति में किए गए परिवर्तन को माता-पिता को प्रकाशित करना चाहते हैं, तो आपको माता-पिता को सूचित करना होगा:

this.getSearchStatusChange.emit(newValue)

और माता-पिता में आपको उस संपत्ति के लिए केला-इन-द-बॉक्स नोटेशन का उपयोग करने की आवश्यकता है:

[(getSearchStatus)]="myBoundProperty"

आप संपत्ति में भी बाँध सकते हैं और बच्चे में बदलाव होने पर कॉलबैक ट्रिगर कर सकते हैं:

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

plnkr देखें


फिर भी एक और तरीका। Plunkr । हम जो चाहते हैं, वह सत्य का एक स्रोत है। हम इस समय उस बच्चे में डाल सकते हैं।

  • बच्चे में Init: searchStatus = false
  • माता-पिता के खाके में, बच्चे को #as या जो भी नाम हो, उसका उदाहरण प्राप्त करें।
  • #as.searchStatus और बच्चे में #as.searchStatus का उपयोग करके माता-पिता में SearchStatus बदलें।




angular2-inputs