Question

我有两个角components，一个是navbar，它出现在每个页面上，默认情况下，navbar的购物车是隐藏的，但在某些情况下，我必须显示那个购物车。

在app.component中调用导航栏，就像在每个页面中一样：

<app-top-bar></app-top-bar> // navbar component
<router-outlet></router-outlet>

现在我有另一个component，称为NegozioComponent并作为页面路由，在该组件中，我得到一个条件，该条件表明导航栏的购物车是否必须可见。

NegozioComponent.ts看起来像这样

export class NegozioComponent implements OnInit {

  profilo: Profilo;
  idNegozio: string;

  constructor(private route: ActivatedRoute, private profiloService: ProfiloService) {

    this.route.params.subscribe((params: Params) => {
      this.idNegozio = params.negozio;
  });
  }

  ngOnInit(): void {
    this.profiloService.profilo(this.idNegozio).subscribe((profilo: Profilo) => {
      this.profilo = profilo;
      if(profilo.moduli) {
         // SET CART TO TRUE
       }
    });
  }

}

在ngOnInit if(profilo.moduli)中，我必须将carrello的{{1}}变量设置为true

TopBarComponent.ts：

TopBarComponent

Answer 1

您需要一个服务，该服务可以在两个组件之间传递此信息。

您的服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class CartService {
  public cartIsEnabled = false;

  constructor() { }

}

您的组件的ts，其中设置了购物车的状态：

this.cartService.cartIsEnabled = true;

您购物车组件的html：

<cart *ngIf="cartService.cartIsEnabled"></cart>

如果未检测到更改并且未显示购物车，则可以将cartIsEnabled变量切换为BehaviorSubject。

如何将变量从一个组件设置为另一个组件？

1 个答案: