从子组件更新 UI 的 Angular 将值反映到父组件答案

【问题标题】：Angular to update UI from the child component reflect the value to the parent component从子组件更新 UI 的 Angular 将值反映到父组件
【发布时间】：2018-03-07 05:39:28
【问题描述】：

我在 Angular 5 中使用 *IF-else 语句。如果授权值为 true，则模板 2 应呈现，如果模板 1 不呈现。这是代码

<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>

调用社交组件

<social></social>

App.component.ts

export class AppComponent {
    public authorized: boolean = false;
}

社交组件.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();
                    }
                }
            );
        }

成功登录后，值更新为this._appComponent.authorized = true;。该值不会反映到 UI/UX。

我从这里找到了一些参考资料 https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/

我尝试使用BehaviorSubject<boolean>。但不知道如何订阅 UI 数据绑定。是，这就是我的方式，必须这样做吗？不能直接对组件变量做吗？

【问题讨论】：

您的社交组件是应用组件的子组件，对吗？如果是这样，那么您可以在成功登录后使用@Output 事件发射器并在应用程序组件中订阅它以将authorized 值更改为true/false
使用 Observable Subject/BehaviourSubject 也能解决你的目的。
像您所做的那样在另一个组件中注入一个组件并不是常见的做法。相反，使用服务在多个组件之间共享数据。我在这里有一篇关于此的博文：blogs.msmvps.com/deborahk/… 以及一个代码示例。

标签： javascript asp.net angular typescript asp.net-core

【解决方案1】：

.html

<div *ngIf="authorized; then picUrl else login"></div>

组件.ts

ngOnInit() {
this.authorized= this.authService.isLoggedIn;
}

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;
}

【讨论】：