将一个对象从锥形组件共享到另一个Angular 2

时间:2016-12-02 16:08:32

标签: javascript angular typescript

我想从第一个组件到第二个组件共享一个对象。我可以在我的Home Component中记录Login Component中定义的'strVal'(字符串),但是我无法在HomeComponent中的Login Component中记录'abc'(Object)的值。我很困惑为什么登录组件中的一个值可用于Home Component而其他值不可用!下面的登录组件代码

  

Login.Component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { AuthenticationService } from '../_services/index';
import { User } from '../contract';

@Component({
    moduleId: module.id,
    templateUrl: 'login.component.html'
})

export class LoginComponent implements OnInit {
    model: any = {};
    loading = false;
    error = '';
    us: User[];
    abc: any[];
    strVal: string = "Rehan";
    current: any;
    constructor(
        private router: Router,
        private authenticationService: AuthenticationService) { }

    ngOnInit() {
        // reset login status
        this.authenticationService.logout();
        this.getUs();
    }

    login() {
        this.loading = true;
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(result => {
                if (result) {
                    this.router.navigate(['/']);
                }
                else {
                    alert('Username and Password Incorrect');
                    this.loading = false;
                    this.model = [];
                    this.router.navigate(['/login']);
                }
            });
    }

    getUs() {
        this.authenticationService.getUsers().subscribe(
            res => this.us = res
        );
    }

    chek() {
        this.abc = this.us.filter(a => a.Login === this.model.username);
        console.log(this.abc);
    }
}
  

Home.Component.ts

import { Component, OnInit, Input } from '@angular/core';
import { AuthenticationService } from '../_services/index';
import { LoginComponent } from '../login/index';
import { User } from '../contract';

@Component({
    moduleId: module.id,
    templateUrl: 'home.component.html',
    providers: [LoginComponent]})

export class HomeComponent implements OnInit {
    users: User[];

    constructor(private userService: AuthenticationService, private Log: LoginComponent) { }

    ngOnInit() {
        this.userService.getUsers().subscribe(
            res => this.users = res
        );
        console.log(this.Log.strVal);
        console.log(this.Log.abc);
    }
}

任何提示或帮助将不胜感激。谢谢!

0 个答案:

没有答案