각도 4의 두 구성 요소 간 부울 값을 변경하는 방법

Question

angular4의 * ngif를 사용하여 UI에서 일부 콘텐츠를 제대로 숨기려고합니다. 아무도 이걸 도와 줄 수 없어요. 그 값은 다른 구성 요소에서 변경되지 않습니다.

Navbar를 틀 :

<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의 구성 요소는 다음과 같습니다 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의 값을 변경하려합니다. 그것의 변화 없음. 여기에 코드가 있습니다.

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의 값을 변경하는 방법을 알려줄 수 있습니까?

Navbar의 구성 요소 : 앱 구성 요소의

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

(부모 요소) :

Answer 1

당신은 각도의 @Input 방법을 사용할 수 있습니다

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

응용 프로그램의 saveSpinner의 값 구성 요소는 navbar 구성 요소의 saveSpinner으로 전달됩니다. 이 경우 (saveSpinner = true) navbar가 표시됩니다.

당신은 대시 보드 구성 요소에

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

    } 

그리고 공통 서비스를 만들기

같은 EventEmitter 것을 사용 서비스 종속성을 주입하고 변경을 방출하는 이름 변경 방법을 호출 할 수 있습니다 :

Answer 2

희망이 도움이

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

그리고 결국 당신이 구성 요소 통신의 간단한 설명을 제공하기 전에 Navbar의 구성 요소의 변화

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

Answer 3

에 가입, 난 강력하게 가서 모든 세부 사항으로 documentation을 읽어보실 것을 권장합니다. 큰 그림을 보는 데 도움이 될 것입니다. 아마도 여기, 함께 소통 할 수있는 방법 코너 구성 요소 요약하자면 그러나

는 두 가지 방법이 있습니다 :

@Input 및 @Output

이것은 당신이 구성 요소 사이의 통신 및 데이터를 전달할 수있는 가장 간단한 방법입니다 위에서 아래로 (부모 => 자식).

자식 구성 요소의 @Input은 부모로부터 데이터를 받고 @Output은 부모에서 자식으로 데이터를 보냅니다.다른 사람들은 @Input은 간단한 클래스 변수이고 @Output은 보통 EventEmitter라고 지적했습니다.

ViewChild는()

이 자식 데이터에 액세스 할 수있는 또 다른 방법입니다. 나는 개인적으로 첫 번째 방법을 선호합니다. 왜냐하면 그것은 무엇이 진행되고 있는지를 명시 적으로 정의하기 때문입니다. 그러나 이것은 몇몇 유즈 케이스에서 그것을 사용하는 또 다른 방법입니다. 당신은 https://angular.io/guide/component-interaction

팁

여기에 중요한 트릭, 당신은 항상 부모로부터 자식에게 전달해야하며, 만약에 이제까지 것은 당신이의 흐름을 제어 할 필요가있는 자신을 발견 더 많은 정보를 얻을 수

부모가 자식 구성 요소별로 부모가된다는 것은 실제로 잘못된 것을하고 아키텍처에 대해 다시 생각해보아야 함을 의미합니다.