angularjs - गैर-नेस्टेड घटकों के बीच डेटा स्थानांतरित करना




typescript angularjs-directive (2)

इस संचार को स्थापित करने के लिए एक सेवा का उपयोग करने की कोशिश करें, LoginPartialComponent subscribe

@Injectable()
export class LoginService {

    onLoginSuccess: EventEmitter<any>() = new EventEmitter<any>();

    constructor() {
    }

    notifyLoginSuccess(item:any):void {
        this.onLoginSuccess.emit({item: item});
    }

}

और फिर इस सेवा को दोनों घटकों पर लगाइए । आपके LoginPartialComponent इन LoginPartialComponent में इस सेवा की घटना के लिए सदस्यता लें।

constructor(public loginService:LoginService) {
    this.loginService.onLoginSuccess.subscribe((loginData: any) => this.item = loginData.item);
}

फिर अपने handleResult में handleResult फ़ंक्शन handleResult करने के लिए एक कॉल करें सेवा। loginService.notifyLoginSuccess और item भेजें।

इस समाधान के साथ आप अपने घटकों की निर्भरता को निकाल सकते हैं, इसलिए LoginComponent को यह जानने की आवश्यकता नहीं है कि एक LoginPartialComponent

असल में, मैं क्या चाहता हूं कि डेटा बी / ड्यू घटकों को स्थानांतरित करना है।

लॉगिन के आंशिक दृश्य के लिए मेरे मास्टर पेज पर एक कोणीय 2 घटक है -

<loginpartial></loginpartial>

यह मूल रूप से बाल घटक के साथ इस HTML टेम्पलेट के माध्यम से प्रदान किया गया है -

<ul [hidden]="!item.isAuthenticated">
    <li><a href="javascript:;">Hello! {{item.userName}}</a></li>
    <li><a href="javascript:;">LogOff</a></li>
</ul>
<ul [hidden]="item.isAuthenticated">
    <li><a href="javascript:;">Hello! User</a></li>
    <li><a href="javascript:;">Log In</a></li>
</ul>

बाल घटक -

@Component({
    selector: 'loginpartial',
    templateUrl: '../Templates/LoginPartial.html'
})

export class LoginPartialComponent implements OnInit {
    public item: any = { isAuthenticated: false, userName: ' ' }
    constructor() {
        this.item.isAuthenticated = false;
    }

    ngOnInit() {
        this.item.isAuthenticated = false;
    }
}

मुझे आशा है कि यह अब तक समझ में आता है। अब उपयोगकर्ता की लॉग-इन होने की मेरी क्या आवश्यकता है, मैं इस आंशिक दृश्य में उपयोगकर्ता नाम को मूल घटक से स्थानांतरित करना चाहता हूं।

जनक घटक

import { Component, ChangeDetectionStrategy, OnInit} from '@angular/core';
import {LoginPartialComponent} from '../loginpartialview/loginpartial.component.ts';
import {SharedService} from '../sharedService/app.sharedService.ts';

@Component({
    selector: 'loginmodel',
    templateUrl: '../Templates/Login.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [LoginPartialComponent,SharedService]
})
export class LoginComponent implements OnInit {
    item: any = {
        isAuthenticated: false, userName: ' '
    };
    constructor(private sharedService: SharedService,
        private loginComp: LoginPartialComponent) {
    }

    onSubmit(item: any): void {
        if (this.myForm.valid) {
            var userObject = {
                email: item.email,
                password: item.password
            };
            this.sharedService.getLogin(userObject).map(response => response.json())
                .subscribe(
                data => this.handleResult(data),
                error => console.log(error)
                );
        }
    }

    private handleResult(data) {
        if (data.success) {
            this.item.isAuthenticated = true;
            this.item.userName = data.userName;
            this.item = this.loginComp.item;
        }
        else {

        }
    }
}

जैसा कि आप इस मूल घटक से देख सकते हैं जब onSubmit फ़ंक्शन को कहा जाता है जो कि मेरा प्रवेश फ़ॉर्म है I मैं कॉल कर रहा हूँ handleResult जो कि साझा सेवा से handleResult कॉल से डेटा सेट कर रहा है।

यह बाल घटक को नहीं दे रहा है - LoginPartialComponent रीफ्रेश मैंने @Input() प्रकार पैरामीटरों के साथ भी कोशिश की, लेकिन मेरी मदद नहीं की

अपडेट -

जैसा कि @ कैमरॉन ने अपने जवाब में कहा था कि मैंने इस लॉग इन प्रयोजन के लिए केवल ईवेंट इम्मिटर्स के साथ निर्भरता बनायी है। लेकिन यह काम नहीं करता है

LoginPartialComponent

import { Component, OnInit} from '@angular/core';
import {LoginPartialModel} from '../loginpartialview/loginpartial.model.ts';
import {SharedService} from '../sharedService/app.sharedService.ts';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Component({
    selector: 'loginpartial',
    templateUrl: '../Templates/LoginPartial.html',
    providers: [SharedService]
})

export class LoginPartialComponent {
    item: LoginPartialModel = new LoginPartialModel();
    constructor(private service: SharedService) {
        this.service.onLoginSuccess.subscribe((loginData: any) => this.item == loginData.item);
    }

}

LoginComponent

import { Component, OnInit} from '@angular/core';
import {SharedService} from '../sharedService/app.sharedService.ts';

@Component({
    selector: 'loginmodel',
    templateUrl: '../Templates/Login.html',
    providers: [SharedService]
})
export class LoginComponent {

    constructor(private sharedService: SharedService) {
    }

    onSubmit(item: any): void {
            var userObject = {
                email: item.email,
                password: item.password
            };
            this.sharedService.getLogin(userObject).map(response => response.json())
                .subscribe(
                data => this.handleResult(data),
                error => console.log(error)
                );
    }
    private handleResult(data) {
        if (data.success) {
            this.close();
            this.sharedService.onLoginSuccess.emit(data);
        }
        else {

        }
    }
}

साझा सेवा (निर्भरता)

import { Component, Injectable, EventEmitter} from '@angular/core';

@Injectable()
export class SharedService {

    onLoginSuccess: EventEmitter<any> = new EventEmitter<any>();
    constructor() {
    }

    notifyLoginSuccess(item: any): void {
        this.onLoginSuccess.emit({ item: item });
    }
}

यह काम नहीं कर रहा था


मेरा मानना ​​है कि पसंदीदा कॉन्योर-कट्टरपंथी तरीके से एक घटक (या सेवा मुझे लगता है, हालांकि मुझे लगता है कि यह अभी के सभी घटकों का अनुमान है) में एक समारोह बनाने के लिए होगा, इसका निरीक्षण करना और उसे सब्सक्राइब करना।

मुझे लगता है कि यह पोस्ट इसे अच्छी तरह से बताती है:

http://mean.expert/2016/05/21/angular-2-component-communication/

इसके अलावा माता-पिता के लिए इनपुट और आउटपुट गुण -> बच्चे और इसके विपरीत संचार भी ध्यान दें।





angularjs-scope