如何更改angular 4中两个组件之间的布尔值

我试图用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>

仪表板模板：

<app-navabar></app-navabar>

有谁能帮我更改仪表板组件中saveSpinner的值。

您可以使用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-navabar [saveSpinner]="saveSpinner"></app-navabar>

在应用程序组件父组件中：

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-navabar [saveSpinner]="saveSpinner"></app-navabar>

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

希望有帮助：

您可以使用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-navabar [saveSpinner]="saveSpinner"></app-navabar>

在应用程序组件父组件中：

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-navabar [saveSpinner]="saveSpinner"></app-navabar>

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

希望有帮助：

您可以使用

创建一个公共服务

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

    }

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

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

你可以用像

创建一个公共服务

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

    }

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

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

---

在向您简单解释组件通信之前，我强烈建议您阅读包含所有详细信息的。它将帮助你看到全局

但为了重述角度分量如何可能一起通信，以下是两种主要方法：

@输入和输出

这是在组件之间进行通信并从上到下传递数据的最简单方法父=>Child

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

视图儿童

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

你可以得到更多的信息

小费

---

这里的一个重要技巧是，您应该始终在父级和子级之间进行通信，如果您发现自己需要按子级控制父级组件的流，这意味着您确实犯了一些错误，您需要重新思考您的体系结构。

在对组件通信进行简单解释之前，我强烈建议你去读这本书，里面有所有的细节。它将帮助你看到全局

但为了重述角度分量如何可能一起通信，以下是两种主要方法：

@输入和输出

这是在组件之间进行通信并从上到下传递数据的最简单方法父=>Child

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

视图儿童

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

你可以得到更多的信息

小费

---

这里的一个重要技巧是，您应该始终从父级到子级进行通信，如果您发现自己需要控制父级到子级组件的流，这意味着您做了一些非常错误的事情，需要重新思考您的体系结构。

您不能从第二个组件更改第一个组件值。请参阅文档。您不能从第二个组件更改第一个组件值。请参阅文档。