如何更改角度 4 中两个组件之间的布尔值答案

【问题标题】：How to change the values of Boolean in between two components in angular 4如何更改角度 4 中两个组件之间的布尔值
【发布时间】：2018-03-21 18:05:46
【问题描述】：

我正在尝试使用 angular4 的 *ngif 在 UI 中隐藏一些内容，但它无法正常工作。任何人都可以帮我解决这个问题。它的值在其他组件中没有改变。

导航栏模板：

<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
  <ul class="navbar-nav ml-auto mt-2 mt-md-0">
    <li class="nav-item active">
      <a class="nav-link" href="#">Dashboard</a>
    </li>
    <div *ngIf="saveSpinner==true" class="dropdown notificatio-dropdown">
      <li>
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false"><span class="noti-icon ml-2"></span>Sample Data</a>
      </li>
    </div>
  </ul>
</div>

导航栏组件：这里 saveSpinner 设置为 false。

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']

})
export class NavbarComponent implements OnInit {
   saveSpinner= false
  ngOnInit() {
  }
}

仪表板模板：

<app-navabar></app-navabar>

仪表板组件：这里我试图将 saveSpinner 的值更改为 true。它没有改变。这是代码。

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  saveSpinner=true;
  constructor() { }
  ngOnInit() {
  }
}

谁能帮助我如何更改 DashboardComponent 中 saveSpinner 的值。

【问题讨论】：

您不能从第二个组件更改第一个组件的值。请参考angular.io/guide/component-interaction 文档。

标签： angular angular-cli angular2-template

【解决方案1】：

您可以使用EventEmitter 之类的东西

创建一个公共服务

export class EmitterService {
       public spinEmitter:EventEmitter<bool>=new EventEmitter(); 

    }

然后在 Dashboard Component 中注入服务依赖并调用 change name 方法发出更改

 constructor(private emitter :EmitterService) {}
 this.emitter.spinEmitter.emit(true);

最后在导航栏组件中订阅更改

this.emitter.spinEmitter.subscribe(val=>{this.saveSpinner=val})

【讨论】：

【解决方案2】：

您可以使用 Angular 的 @Input 方法：

导航栏组件：

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']

})
export class NavbarComponent implements OnInit {
  @Input saveSpinner : boolean= false
  ngOnInit() {
  }
}

在App组件（父组件）中：

<app-navabar [saveSpinner]="saveSpinner"></app-navabar>

app 组件的saveSpinner 的值将传递给导航栏组件的saveSpinner。在这种情况下 (saveSpinner = true) 将显示导航栏。

希望对你有帮助:)

【讨论】：

【解决方案3】：

在给你简单解释组件通信之前，我强烈建议你去阅读documentation的所有细节。它将帮助您了解全局。

但是回顾一下 Angular 组件是如何相互通信的，这里有两个主要的方法：

@Input 和@Output

这是您可以在组件之间进行通信并从上到下传递数据的最简单方法（Parent => Child）。

子组件中的@Input 从父组件接收数据，@Output 将数据从父组件发送给子组件。正如其他人指出的那样，@Input 是一个简单的类变量，@Output 通常是 EventEmitter。

ViewChild()

这是访问子数据的另一种方式。我个人更喜欢第一种方法，因为它明确定义了正在发生的事情，但是，这是在某些用例中使用它的另一种方法。

您可以获取更多信息https://angular.io/guide/component-interaction

提示

这里的一个重要技巧是，您应该始终从父组件到子组件进行通信，如果您发现自己需要通过子组件控制父组件的流程，这意味着您确实做了一些非常错误的事情，您需要重新考虑关于你的架构。

【讨论】：