angularjs - update - Daten zwischen nicht verschachtelten Komponenten übertragen




angularjs set html title (2)

Ich glaube, der bevorzugte angular-fanatische Weg wäre, eine Funktion in einer Komponente (oder einem Dienst, den ich vermute, obwohl ich denke, dass es alles nur Komponenten sind) zu machen. Observable und abonnieren Sie es.

Ich denke, dass dieser Beitrag es gut auslegt:

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

Beachten Sie auch die Eingabe- und Ausgabeeigenschaften für die übergeordnete -> untergeordnete und umgekehrt Kommunikation.

Grundsätzlich möchte ich Daten s / w-Komponenten übertragen.

Ich habe eine angular2-Komponente auf der Masterseite für eine Teilansicht des Logins -

<loginpartial></loginpartial>

Dies wird zunächst über diese HTML-Vorlage mit Kindkomponente gerendert -

<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>

Kinderkomponente -

@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;
    }
}

Ich hoffe, das macht bis jetzt Sinn. Nun, was ich brauche, sobald der Benutzer angemeldet ist, möchte ich, dass der Benutzername in dieser Teilansicht von der übergeordneten Komponente übertragen wird.

Hauptkomponente

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 {

        }
    }
}

Wie Sie von dieser übergeordneten Komponente sehen, wenn onSubmit Funktion aufgerufen wird, die meine Anmeldung handleResult ist, handleResult ich handleResult , die Daten von Ajax-Aufruf aus dem freigegebenen Dienst handleResult .

Dadurch wird die LoginPartialComponent Komponente - LoginPartialComponent nicht LoginPartialComponent . Ich habe versucht, mit @Input() Parameter @Input() aber hat mir nicht geholfen.

Aktualisierung -

Wie @Camaron in seiner Antwort sagte, habe ich eine Abhängigkeit für diesen Login-Zweck nur bei Event-Emittern erstellt. Aber das funktioniert nicht.

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);
    }

}

Anmeldekomponente

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 {

        }
    }
}

Shared Service (Abhängigkeit)

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 });
    }
}

Das hat nicht funktioniert.


Versuchen Sie, einen Dienst zu verwenden, um diese Kommunikation LoginPartialComponent subscribe die LoginPartialComponent .

@Injectable()
export class LoginService {

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

    constructor() {
    }

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

}

Und dann injizieren Sie diesen Dienst für beide Komponenten. In Ihrer LoginPartialComponent abonnieren Sie dieses Service-Ereignis.

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

Dann rufen loginService.notifyLoginSuccess in Ihrer handleResult Funktion loginService.notifyLoginSuccess und senden Sie das item .

Mit dieser Lösung können Sie die Abhängigkeit Ihrer Komponenten entfernen, sodass die LoginComponent nicht wissen muss, dass eine LoginPartialComponent .





angularjs-scope