问题描述
我有我的登录控制器,我可以在该控制器上登录,成功后我将获得要显示在主页上的数据.如何将这些数据传递到家庭组件?
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将数据从一个组件传递到另一组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!