angularjs - otro - pasar parametros entre componentes angular 4

Transferencia de datos entre componentes no anidados

Question

Básicamente, lo que deseo es transferir componentes b / n de datos.

Tengo un componente angular2 en la página maestra para una vista parcial de inicio de sesión -

<loginpartial></loginpartial>

Esto se procesa inicialmente a través de esta plantilla html con componente secundario -

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

Componente hijo -

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

Espero que esto tenga sentido hasta ahora. Ahora lo que necesito es tan pronto como el usuario inicie sesión, quiero obtener un nombre de usuario en esta vista parcial transferida desde el componente principal.

Componente principal

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 {

        }
    }
}

Como se puede ver en este componente principal cuando se onSubmit función de onSubmit , que es mi envío de formulario de inicio de sesión, estoy llamando a handleResult que está configurando datos desde una llamada ajax desde el servicio compartido.

Esto no permite que el componente secundario - LoginPartialComponent actualice. Intenté con los parámetros de tipo @Input() también pero no me ayudaron.

Actualización -

Como dijo @Camaron en su respuesta, creé una dependencia para este propósito de inicio de sesión solo con emisores de eventos. Pero esto no funciona.

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 {

        }
    }
}

Servicio compartido (dependencia)

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

Esto no funcionó.

Answer 1

Creo que la forma preferida de fanático angular sería hacer una función en un componente (o servicio, supongo, aunque supongo que ahora solo se trata de componentes). Observable y suscríbase.

Creo que esta publicación lo explica bien:

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

También tenga en cuenta las propiedades de entrada y salida para comunicación padre -> hijo y viceversa.

Answer 2

Intente usar un servicio para establecer esta comunicación, subscribe al LoginPartialComponent .

@Injectable()
export class LoginService {

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

    constructor() {
    }

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

}

Y luego Inyecte este servicio en ambos componentes. En su LoginPartialComponent suscríbase a este evento de servicio.

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

Luego, en su función handleResult realice una llamada a loginService.notifyLoginSuccess y envíe el item .

Con esta solución puede eliminar la dependencia de sus componentes para que LoginComponent no necesite saber que hay un LoginPartialComponent .