angular - कोणीय 2 में एक घटक से दूसरे में ऑब्जेक्ट कैसे पास करें?




angular2-directives (4)

मेरे पास कोणीय घटक हैं और पहला घटक दूसरे को निर्देश के रूप में उपयोग करता है। उन्हें उसी मॉडल ऑब्जेक्ट को साझा करना चाहिए, जिसे पहले घटक में आरंभीकृत किया गया है। मैं उस मॉडल को दूसरे घटक में कैसे पास कर सकता हूं?


आउटपुट एनोटेशन का उपयोग करें

@Directive({
  selector: 'interval-dir',
})
class IntervalDir {
  @Output() everySecond = new EventEmitter();
  @Output('everyFiveSeconds') five5Secs = new EventEmitter();
  constructor() {
    setInterval(() => this.everySecond.emit("event"), 1000);
    setInterval(() => this.five5Secs.emit("event"), 5000);
  }
}
@Component({
  selector: 'app',
  template: `
    <interval-dir (everySecond)="everySecond()" (everyFiveSeconds)="everyFiveSeconds()">
    </interval-dir>
  `,
  directives: [IntervalDir]
})
class App {
  everySecond() { console.log('second'); }
  everyFiveSeconds() { console.log('five seconds'); }
}
bootstrap(App);

आप एक सेटर के साथ एक सेवा में अपने डेटा को स्टोर कर सकते हैं और इसे एक गेटर के ऊपर प्राप्त कर सकते हैं

import { Injectable } from '@angular/core';

@Injectable()
export class StorageService {

    public scope: Array<any> | boolean = false;

    constructor() {
    }

    public getScope(): Array<any> | boolean {
        return this.scope;
    }

    public setScope(scope: any): void {
        this.scope = scope;
    }
}

घटक से

import { Component, OnInit, ViewChild} from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { dataService } from "src/app/service/data.service";
    @Component( {
        selector: 'app-sideWidget',
        templateUrl: './sideWidget.html',
        styleUrls: ['./linked-widget.component.css']
    } )
    export class sideWidget{
    TableColumnNames: object[];
    SelectedtableName: string = "patient";
    constructor( private LWTableColumnNames: dataService ) { 
       
    }
    
    ngOnInit() {
        this.http.post( 'getColumns', this.SelectedtableName )
            .subscribe(
            ( data: object[] ) => {
                this.TableColumnNames = data;
     this.LWTableColumnNames.refLWTableColumnNames = this.TableColumnNames; //this line of code will pass the value through data service
            } );
    
    }    
    }

डेटा सेवा

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable()
export class dataService {
    refLWTableColumnNames: object;//creating an object for the data
}

घटक को

import { Component, OnInit } from '@angular/core';
import { dataService } from "src/app/service/data.service";

@Component( {
    selector: 'app-linked-widget',
    templateUrl: './linked-widget.component.html',
    styleUrls: ['./linked-widget.component.css']
} )
export class LinkedWidgetComponent implements OnInit {

    constructor(private LWTableColumnNames: dataService) { }

    ngOnInit() {
    console.log(this.LWTableColumnNames.refLWTableColumnNames);
    }
    createTable(){
        console.log(this.LWTableColumnNames.refLWTableColumnNames);// calling the object from another component
    }

}


माता-पिता से बच्चे के लिए @Input डेटा बाइंडिंग के लिए, बाल घटक पर इनपुट संपत्ति निर्दिष्ट करने के लिए @Input डेकोरेटर (स्टाइल गाइड द्वारा recommended ) का उपयोग करें

@Input() model: any;   // instead of any, specify your type

और पेरेंट टेम्पलेट में टेम्पलेट प्रॉपर्टी बाइंडिंग का उपयोग करें

<child [model]="parentModel"></child>

चूंकि आप एक ऑब्जेक्ट (एक जावास्क्रिप्ट संदर्भ प्रकार) पास कर रहे हैं, तो आप माता-पिता या बच्चे के घटक में ऑब्जेक्ट गुणों के लिए जो भी बदलाव करते हैं, वह अन्य घटक में परिलक्षित होगा, क्योंकि दोनों घटकों में एक ही ऑब्जेक्ट का संदर्भ है। मैं इसे Plunker में दिखाता Plunker

यदि आप मूल घटक में ऑब्जेक्ट को पुन: असाइन करते हैं

this.model = someNewModel;

कोणीय बच्चे के घटक (स्वचालित रूप से परिवर्तन का पता लगाने के भाग के रूप में) के लिए नए ऑब्जेक्ट संदर्भ का प्रचार करेगा।

केवल एक चीज जो आपको नहीं करनी चाहिए वह बाल घटक में ऑब्जेक्ट को पुन: असाइन करना है। यदि आप ऐसा करते हैं, तो अभिभावक अभी भी मूल ऑब्जेक्ट को संदर्भित करेगा। (यदि आपको दो-तरफ़ा डेटा बाइंडिंग की आवश्यकता है, तो https://.com/a/34616530/215945 )।

@Component({
  selector: 'child',
  template: `<h3>child</h3> 
    <div>{{model.prop1}}</div>
    <button (click)="updateModel()">update model</button>`
})
class Child {
  @Input() model: any;   // instead of any, specify your type
  updateModel() {
    this.model.prop1 += ' child';
  }
}

@Component({
  selector: 'my-app',
  directives: [Child],
  template: `
    <h3>Parent</h3>
    <div>{{parentModel.prop1}}</div>
    <button (click)="updateModel()">update model</button>
    <child [model]="parentModel"></child>`
})
export class AppComponent {
  parentModel = { prop1: '1st prop', prop2: '2nd prop' };
  constructor() {}
  updateModel() { this.parentModel.prop1 += ' parent'; }
}

Plunker - कोणीय RC.2





angular2-directives