打開關閉同級組件

我有一個側邊欄和一個按鈕，單擊時我想切換變量true或false，然後顯示/隱藏兄弟組件。我收到錯誤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>

來源

2016-11-21 Daimz

您聲明showDetails作爲EventEmitter，右後，在構造函數中，你將它初始化爲假。 false對於EventEmitter類型的變量不是有效的值。不確定信息如何更清晰。 –

是的，很明顯，我不能使用布爾值，這很明顯。什麼不是爲什麼，我能做些什麼呢。我如何在兩個組件之間推送真/假值。 – Daimz

使用你的事件發射器來發射事件。從父組件收聽這些事件以更改詳細信息組件的showDetails輸入的值。 –

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

來源

2016-11-21 10:56:04 Nikolai

我走了，上面更新了代碼。我現在得到這個錯誤'類型'EventEmitter <{}>'不能分配給類型'EventEmitter '。類型'{}'不能分配給'boolean'類型。' – Daimz

另外我的補充工具欄和細節組件都是應用程序組件的子項，而不是彼此的，所以我不確定這將如何與'＃側邊欄＃'配合使用。 – Daimz

我忘了添加<>到EventEmitter，請參閱更新的代碼。你也可以在兄弟節點中使用＃變量。所以它看起來像： – Nikolai

打開關閉同級組件

回答

相關問題