如何更改角度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

回答

相關問題