Открыть близкий родственный компонент

Question

У меня есть боковая панель с кнопкой, которая при нажатии меня хотела бы переключить переменную true или false, которая затем отображает/скрывает компонент sibling. Я получаю сообщение об ошибке Type '{}' is not assignable to type 'boolean'. Как я могу достичь этого правильно?

боковой панели-menu.component.ts

import { Component, EventEmitter, Output } from '@angular/core'; 

@Component({ 
    selector: 'sidebar-menu', 
    templateUrl: './sidebar-menu.component.html', 
    styleUrls: ['./sidebar-menu.component.styl'] 
}) 
export class SidebarMenuComponent { 

    showDetails = false; 
    @Output() 
    onShowDetails: EventEmitter<boolean> = new EventEmitter(); 

    constructor() {} 

    toggleDetails() { 
    this.showDetails = !this.showDetails; 
    this.onShowDetails.emit(this.showDetails); 
    console.log('Sidebar Toggle', this.showDetails); 
    } 

} 

details.component.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'details', 
    templateUrl: './details.component.html', 
    styleUrls: ['./details.component.styl'] 
}) 
export class DetailsComponent { 

    @Input() showDetails: boolean; 

    constructor() { 

    } 

} 

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.styl'] 
}) 
export class AppComponent { 
    @Input() showDetails: boolean = false; 


    constructor() { 
    } 

} 

app.component.html

<sidebar-menu></sidebar-menu> 
<details *ngIf="showDetails"></details> 
<router-outlet></router-outlet> 

Answer 1

Ваш ShowDetails свойство не логического типа, это тип EventEmitter<boolean>, и когда вы пытаетесь установить значение как this.showDetails = false; он выдает ошибку. Попробуйте это:

import { Component, EventEmitter, Output } from '@angular/core'; 

@Component({ 
    selector: 'sidebar-menu', 
    templateUrl: './sidebar-menu.component.html', 
    styleUrls: ['./sidebar-menu.component.styl'] 
}) 
export class SidebarMenuComponent { 

    showDetails = false; 
    @Output() 
    onShowDetails: EventEmitter<boolean> = new EventEmitter<boolean>(); 

    constructor() {  
    } 

    toggleTeamDetails() { 
    this.showDetails = !this.showDetails; 
    this.onShowDetails.emit(this.showDetails); 
    console.log('Sidebar Toggle', this.showDetails); 
    }  
} 

и компонент, который заинтересован в этом случае должны подписаться на это событие.

Кроме того, если вы хотите использовать логическое значение непосредственно в шаблоне вы можете сделать это:

<sidebar #sidebar> 
    <child-component *ngIf="sidebar.showDetails"></child-component> 
</sidebar> 
<sibling-component *ngIf="sidebar.showDetails"></sibling-component>