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

我试图隐藏一些内容在UI中使用* ngif的angular4它不能正常工作。任何人都可以帮助我解决这个问题。它的价值在其他组件中没有变化。如何更改角度4中的两个组件之间的布尔值4

导航栏模板：

<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的值。

来源

2017-10-10 Jeevan

您不能更改第二个组件的第一个组件值。请参阅https://angular.io/guide/component-interaction文档。 – baj9032

您可以使用角的@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>

的应用程序的saveSpinner值组件将被传递给导航栏组件的saveSpinner。在这种情况下（saveSpinner = true）将显示导航栏。

希望它能帮助:)

来源

2017-10-10 11:01:19

您可以在仪表板组件使用EventEmitter像

创建一个通用的服务

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

    }

然后注入服务的依赖，并呼吁改变名称的方法来发射的变化

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

并在最后在导航栏组件订阅变化

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

来源

2017-10-10 11:07:57 jitender

之前给你组件通信的一个简单的解释，我强烈建议你去和所有的细节看documentation。它会帮助你看到大局。

但回顾一下组件是如何角都不可能在一起通信，这里有两种主要的方法：

@input和@Output

这是你能组件之间的通讯和数据传递的最简单方法从上到下（Parent => Child）。

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

ViewChild（）

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

你可以得到更多的信息https://angular.io/guide/component-interaction

提示

在这里，一个重要的技巧是，你应该总是由父母传递给孩子，如果有的话，你发现自己，你需要控制的流家长按孩子的组成部分，这意味着你做了一些真正错误的事情，你需要重新思考你的架构。

来源

2017-10-10 15:59:02

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

回答

相关问题