[英]Angular to update UI from the child component reflect the value to the parent component
I, am using *IF-else statement in angular 5. If the authorization value is true the template 2 should render if not template 1 should render. 我使用的是角度5中的* IF-else语句。如果授权值为true,则应渲染模板2;否则,应渲染模板1。 Here is the code
这是代码
<div *ngIf="authorized; then picUrl else login"></div>
<ng-template #login>
<button mat-raised-button color="accent" class="mdl-cell mdl-cell--12-col mdl-color-text--white" style="background: #033342" (click)="openDialog()">Login</button>
</ng-template>
<ng-template #picUrl>
<img src="{{_loginVM.profilePic}}" class="img-thumbnail" alt="profile pic">
</ng-template>
Calling the social component 调用社交组件
<social></social>
App.component.ts App.component.ts
export class AppComponent {
public authorized: boolean = false;
}
Social component.ts 社会组成部分
import { AppComponent} from '../app/app.component'
export class SocialComponent {
private _appComponent: AppComponent;
constructor(private socialAuthService: AuthService, appComponent: AppComponent,
public dialogRef: MatDialogRef<SignInSignUpDialogHomeComponent>) {
this._appComponent = appComponent;
}
public socialSignIn(socialPlatform: string) {
let socialPlatformProvider: any;
if (socialPlatform == "facebook") {
socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
} else if (socialPlatform == "google") {
socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
}
this.socialAuthService.signIn(socialPlatformProvider).then(
(userData) => {
if (userData != null) {
this._appComponent.authorized = true;
this._appComponent._loginVM.profilePic = userData.image;
this.dialogRef.close();
}
}
);
}
After the successfully login the value is updated as this._appComponent.authorized = true;
成功登录后,该值将更新为
this._appComponent.authorized = true;
. 。 The value is not reflected to the UI/UX.
该值不会反映到UI / UX。
I found some references from here https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ 我从这里找到了一些参考https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/
I, tried with BehaviorSubject<boolean>
. 我尝试了
BehaviorSubject<boolean>
。 But no know how to subscribe to the UI data bind. 但是不知道如何订阅UI数据绑定。 Is, this is the way I, have to do?.
是,这是我必须做的方式? Can't I do directly to the component variable?
我不能直接对组件变量进行操作吗?
.html html的
<div *ngIf="authorized; then picUrl else login"></div>
component.ts component.ts
ngOnInit() {
this.authorized= this.authService.isLoggedIn;
}
service.ts service.ts
get isLoggedIn(): boolean {
return this.currentUser != null; //you can decide to return true or false
}
get currentuser(): user{
let user = localstorage.getitem('details')
return user;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.