如何以角度2将数据从一个组件传递到另一组件 [英] How to pass data from one component to other in angular 2

问题描述

我有我的登录控制器，我可以在该控制器上登录，成功后我将获得要显示在主页上的数据.如何将这些数据传递到家庭组件?

I have my login controller where i login and on success I get data to be displayed on home page. How do i pass this data to home component?

这是登录组件中的功能

 ngOnInit() {
  this.returnUrl = '/home';
  }
  doLogin(event) {
   // console.log(event);
   // console.log(this.loginForm.value);
   this.authenticationService.login(this.loginForm.value.username, this.loginForm.value.password)
   .subscribe(
   (response) => {
    console.log(response);
   if(response.authenticateResult==0){
    sessionStorage.setItem('user_token', response.user_token);
   console.log(response.project_list.projects);
    this.router.navigate([this.returnUrl]);
    }else{
this.error = 'Please enter correct Username and password';
    }
   }
   )
  }

response.project_list.projects具有要在主页中显示的项目列表.我是Angle 2的新手.因此，我不理解如何才能访问登录组件中的数据.有什么方法可以从一个组件访问其他组件的数据，并根据该特定组件进行处理?

response.project_list.projects has list of projects which I want to display in home page. I am new to angular 2 . So I am not understanding how i can get access to the data which is in login component. Is there any way to access data from 1 component to other and process it according to that particular component?

推荐答案

最好使用

It's better to use services to share data between components. You can create something like following

// replace any to your actual projects type
@Injectable()
export class ProjectsService {
    public setProjects(projects: any) {
        this._projects = projects;
    }

    public get projects(): any {
        return this._projects;
    }

    private _projects: any = null; //or empty array if projects is an array
}

然后您可以将其注入登录"和主页"组件中:

Then you can inject it in both Login and Home components:

export class LoginComponent {
    constructor(private projectsService: ProjectsService) { }

    ngOnInit() {
      this.returnUrl = '/home';
      }

      doLogin(event) {
       // console.log(event);
       // console.log(this.loginForm.value);
       this.authenticationService.login(this.loginForm.value.username, this.loginForm.value.password)
       .subscribe(
       (response) => {
        console.log(response);
       if(response.authenticateResult==0){
        sessionStorage.setItem('user_token', response.user_token);
       console.log(response.project_list.projects);
        this.projectsService.setProjects(response.project_list.projects);
        this.router.navigate([this.returnUrl]);
        }else{
    this.error = 'Please enter correct Username and password';
        }
       }
       )
      }
}

export class HomeComponent {
    constructor(private projectsService: ProjectsService) { }

    ngOnInit() {
      console.log(this.projectsService.projects);
    }
}

更新:

您还可以将游览项目保存在LocalStorage中:

You can additionally save tour projects in LocalStorage:

// replace any to your actual projects type
@Injectable()
export class ProjectsService {
    constructor() {
        const projects: any = localStorage.getItem(this.projectsKey);
        if (projects) {
            this._projects = JSON.parse(projects);
        }
    }
    public setProjects(projects: any) {
        localStorage.setItem(this.projectsKey, JSON.stringify(projects));
        this._projects = projects;
    }

    public get projects(): any {
        return this._projects;
    }

    private _projects: any = null; //or empty array if projects is an array
    private readonly projectsKey: string = 'projects_key';
}

这篇关于如何以角度2将数据从一个组件传递到另一组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！