[英]Sharing data between angular components
I want to share data in angular between two components. 我想在两个组件之间共享角度数据。 I did as explained here and here . 我按照此处和此处的说明进行操作。 Below is my code 下面是我的代码
login.component.ts login.component.ts
import { Component, OnInit } from '@angular/core';
import { User } from '../domain/User';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { LoginResponse } from '../domain/LoginResponse'
import { DataSharingService } from '../service/DataSharingService';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
providers: [DataSharingService]
})
export class LoginComponent implements OnInit {
private user:User = new User();
private xSSOFamilyId:string = 'BOMO';
constructor(private httpClient: HttpClient, private dataSharingService: DataSharingService, private router: Router) { }
ngOnInit() {
}
login(): void {
var authorization:string = 'Basic ' + btoa(this.user.cwopa + ":" + this.user.password);
var httpHeaders = new HttpHeaders({
'Authorization': authorization,
'userId': this.user.cwopa,
'X-SSO-Family-Id': this.xSSOFamilyId
});
this.httpClient.post<LoginResponse>('http://localhost:8081/web-beginner/authenticate', undefined, {headers: httpHeaders}).subscribe(response => {
this.router.navigate(['dashboard'])
}, error => {
console.log("error occured");
});
}
public getApiKey() {
this.dataSharingService.setData({apikey: '1234'});
}
}
dashboard.component.ts dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { DataSharingService } from '../service/DataSharingService';
import { LoginComponent } from '../login/login.component';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
providers: [DataSharingService, LoginComponent]
})
export class DashboardComponent implements OnInit {
constructor(private dataSharingService: DataSharingService, private loginComponent: LoginComponent) { }
ngOnInit() {
this.dataSharingService.currentData.subscribe(data => {
console.log(data)
});
}
authorize(appName:string): void {
console.log(this.loginComponent.getApiKey())
}
}
I have a link in dashboard.component.html. 我在dashboard.component.html中有一个链接。 Each time I click it, onNgInit and authorize functions are called. 每次单击它时,都会调用onNgInit和authorize函数。
Furthermore, the data I want to receive in dashboard.component.ts's authorize function is print undefined and onNgInit is printing the expected value. 此外,我要在dashboard.component.ts的authorize函数中接收的数据未打印,而onNgInit正在打印期望值。
Can anyone please tell me whats wrong with the code? 谁能告诉我代码有什么问题吗?
remove providers: [DataSharingService] from login component add DataSharingService to the app.module.ts provider so it will be singleton. 删除提供程序:从登录组件中删除[DataSharingService],将DataSharingService添加到app.module.ts提供程序中,这样它将是单例。
Don't inject component as this through constructor. 不要通过构造函数注入组件。
private loginComponent: LoginComponent
Just use a service to share data or if your DashboardComponent.html contain LoginComponent as a component, you can use @ViewChild As Sujay's answer. 只需使用服务即可共享数据,或者如果您的DashboardComponent.html包含LoginComponent作为组件,则可以使用@ViewChild作为Sujay的答案。 So you can use same DataSharingService for getting api key. 因此,您可以使用相同的DataSharingService获取api密钥。
You need to get the reference of the LoginComponent
using @ViewChild
keyword 您需要使用@ViewChild
关键字获取LoginComponent
的引用
import { Component, OnInit } from '@angular/core';
import { DataSharingService } from '../service/DataSharingService';
import { LoginComponent } from '../login/login.component';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css'],
providers: [DataSharingService, LoginComponent]
})
export class DashboardComponent implements OnInit {
@ViewChild(LoginComponent) loginComponent: LoginComponent
constructor(private dataSharingService: DataSharingService) { }
ngOnInit() {
this.dataSharingService.currentData.subscribe(data => {
console.log(data)
});
}
authorize(appName:string): void {
console.log(this.loginComponent.getApiKey())
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.