如何在角度 4 的两个组件之间更改布尔值 [英] How to change the values of Boolean in between two components in angular 4

问题描述

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

导航栏模板:

<ul class="navbar-nav ml-auto mt-2 mt-md-0"><li class="nav-item active"><a class="nav-link" href="#">仪表板</a><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>样本数据</a>

Navbar 组件:这里 saveSpinner 设置为 false.

 import {Component} from '@angular/core';@成分({选择器:应用程序导航栏"，templateUrl: './navbar.component.html',styleUrls: ['./navbar.component.css']})导出类 NavbarComponent 实现 OnInit {saveSpinner=假ngOnInit() {}}

仪表板模板:

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

 import { Component, OnInit } from '@angular/core';@成分({选择器:应用仪表板"，templateUrl: './dashboard.component.html',styleUrls: ['./dashboard.component.css']})导出类 DashboardComponent 实现 OnInit {saveSpinner=真；构造函数(){}ngOnInit() {}}

谁能帮我更改 DashboardComponent 中 saveSpinner 的值.

解决方案

你可以使用 EventEmitter 类似的东西

创建公共服务

导出类 EmitterService {public spinEmitter:EventEmitter=new EventEmitter();}

然后在 Dashboard 组件中注入服务依赖并调用更改名称方法来发出更改

 构造函数(私有发射器:EmitterService){}this.emitter.spinEmitter.emit(true);

最后在 Navbar 组件中订阅更改

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

I am trying to hide some Content in in the UI using *ngif of angular4 its not working properly. can anybody help me on this. its value is not changing in the other component.

Navbar Template:

<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>

Navbar Component: Here saveSpinner is set to 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() {
  }
}

Dashboard template:

<app-navabar></app-navabar>

Dashboard Component: Here i am trying to change the value of saveSpinner to true. Its Not Changing. Here is the Code.

   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() {
  }
}

Can anybody help me how to change the value of saveSpinner in the DashboardComponent.

解决方案

You can use EventEmitter something like

Create a common service

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

    }

Then in Dashboard Component inject service dependency and call change name method to emit the change

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

And at the end in Navbar Component subscribe to changes

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

这篇关于如何在角度 4 的两个组件之间更改布尔值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！