首页 文章

将值从LoginComponent传递给RootComponent

提问于
浏览 次
0

我正在努力使用* ngIf删除导航栏中的登录/注销 . 如果我登录，则应隐藏注销链接 . 请参阅我的设置 .

app.component.ts

import { Component, OnInit } from '@angular/core';

import { UserService } from './user';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app works!';

  loginstatus: boolean = false;

  constructor(private _userService: UserService, private _router: Router){}

  onLogout(){
    this._userService.logout();
    this._router.navigate(['/login']);
  }

  ngOnInit(){
    this.onLogout();
  }
}

app.component.html

<ul class="navigation">
  <li *ngIf="!loginstatus"><a routerLink="/login" routerLinkActive="active">Login</a></li>
  <li *ngIf="loginstatus"><a (click)="onLogout()">Logout</a></li>
</ul>

<router-outlet></router-outlet>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators} from '@angular/forms';

import { UserService } from '../user.service';

@Component({
    selector: 'login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit{
    user = {
        username: '',
        password: ''
    }

    loginForm: FormGroup;

    constructor(private _userService: UserService, private _formBuilder: FormBuilder){}

    ngOnInit(){
        this.loginForm = this._formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        });
    }

    onLogin(){
        this._userService.postUserLogin(this.user)
            .subscribe(token => {
                console.log(localStorage.getItem('currentUser'));
            })
            err => console.log(err);
    }
}

我们可以看到，我使用变量loginstatus来确定用户是否登录 . 现在我的问题是，从登录组件，我如何更改loginstatus的值以隐藏导航栏的登录？

angular typescript

2 回答

  • 2

    这里的主要问题是你真的不想共享 value ;你希望事件发生变化 . 该事件可以是用例如实现的事件 . EventEmitter 或 rxjs 或带有 ngOnChanges 的标准角度变化检测 .

    例如 . 创建RX主题：

    export const loginStatusChanged = new BehaviorSubject<boolean>(false);

    这意味着默认情况下用户未登录 .

    然后在app.component中订阅该事件：

    import { loginStatusChanged } from ...;

...

loginStatus: boolean;

...

ngOnInit() {
  loginStatusChanged.subscribe(status => this.loginStatus = status);
}

    并在login.component中

    ...
// when logged in
loginStatusChanged.next(true);
...

    有人可能会在这里争辩说，最好通过服务来做到这一点 . 也许 . 也许不吧 . 我认为在这种特殊情况下它并不重要 . 它可以工作，即使没有注射也很容易进行单元测试 .

    一个小提醒：如果它不是AppComponent，那么 unsubscribe 来自observable或使用ng2-rx-collector（抱歉，广告：D）是有意义的 . 这里并不是必需的，因为AppComponent仅在您关闭整个应用程序时被销毁 .

    回复于
  • 0

    一种可能的方法是创建在 LoginComponent 和 AppComponent 之间共享的公共服务，并且通过此服务，您可以在 LoginComponent 和 AppComponent 之间进行通信 . 检查Parent and children communicate via a service文档 .

    回复于

相关问题