更改子组件变量时更新父组件

Question

例如，我有一个来自服务的名为 totalQuantity 的变量。

我有一个子组件初始化该变量仅当用户登录时。

这是子组件。

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

import { CartService } from '../cart';

@Component({
    selector: 'landing',
    templateUrl: './landing.component.html'
})

export class LandingComponent implements OnInit{
    @Output() homeChanged = new EventEmitter;

    constructor(private _cartService: CartService){}

    ngOnInit(){
        this._cartService.getCartItems(localStorage.getItem('currentUserId'))
            .subscribe((cart) => {
                this.homeChanged.emit(this._cartService.totalQuantity);
                console.log(this._cartService.totalQuantity);
            },
            err => console.log(err));
    }
}

如您所见，我有一个名为 homeChanged 的 @Output 变量，它将在子组件初始化时发出 totalQuantity。我需要在我的父组件中显示它 IF ONLY 用户已登录，因为这是唯一一次 Cart 在导航栏上显示。

这是我的父组件。

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

import { loginStatusChanged } from './auth.guard';
import { CartService } from './cart';
import { UserService } from './user';

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

  loginStatus: boolean;

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

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

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

父组件 HTML 我将把 totalQuantity

<ul class="navigation">
  <li class="logo"><img src="assets/images/nav_logo.png"></li>
  <li><a routerLink="/home" routerLinkActive="active">Home</a></li>
  <li><a routerLink="/mainproducts" routerLinkActive="active">Products</a></li>
  <li *ngIf="loginStatus"><a href="http://localhost:3000">Designer</a></li>
  <li *ngIf="loginStatus"><a routerLink="/cart" routerLinkActive="active">Cart({{totalQuantity}})</a></li>
  <li *ngIf="!loginStatus"><a routerLink="/login" routerLinkActive="active">Login</a></li>
  <li *ngIf="loginStatus" class="dropdown"><a (click)="onLogout()">Logout</a></li>

</ul>

<router-outlet></router-outlet>

谁能帮我在购物车旁边的导航栏上显示总数量？

Answer 1

这里是如何从子组件更新父组件。

        @Component({
          selector: 'child-selector',
          template: 'child.component.html'
        })
        export class ChildComponent {  
          @output() notify: EventEmitter<string> = new EventEmitter<string>();

          onClick() {
            this.notify.emit('Click from nested component');
          }
        }




        /* parent.conponent.html */
        <div>  
          <h1>I'm a container component</h1>
          <child-selector (notify)='onNotify($event)></child-selector>
        </div>  




        @Component({
          selector: 'parent-selector',
          template: 'parent.component.html',
          directives: [ChildComponent]
        })
        export class ParentComponent {  
          onNotify(message:string):void {
            alert(message);
          }
        }

Answer 2

您可以像这样使用主题：

在你的parent中：

public static returned: Subject<any> = new Subject();

并在您的 parent 构造函数中订阅 child 中的更改，如下所示：

  AppComponent.returned.subscribe(res => {
     console.log('change happened!');
     console.log(res) // you have your passed value here
  });

并且在您的 child 组件中，您需要 parent 更新添加这个，并作为您想要的参数，这里我们只传递一个字符串。

AppComponent.returned.next('test'); // pass whatever you need

编辑：输出仅在您的 child 组件不在不同路线后面的情况下有效。所以在你的情况下你不能使用 Output.

更改子组件变量时更新父组件

Updating a parent component when child component variable is changed

angular2-components

angular