在Angular2中，我需要顯示和隱藏父組件中的子組件

在Angular2中最好顯示和隱藏子組件？在Angular2中，我需要顯示和隱藏父組件中的子組件

我有一個父組件和三個子組件。

默認情況下onInit所有子組件都需要隱藏。 And childComponentA需要顯示父組件中的按鈕的onclick。

流程：

我在childComponentA一個按鈕，需要顯示的點擊childComponentB和childComponentB組件有一個按鈕，需要顯示childComponentC。所以就像展示和隱藏的流程一樣。

最好能做到這一點嗎？

可能的解決方案？

我想創建一個服務，所有的子組件訂閱顯示和隱藏。但不知道它是否是最好的解決方案。

父組件的HTML：

<section> 
    <button (click)="showChildComponentA()"></button> 

    <childComponentA></childComponentA> 
    <childComponentB></childComponentB> 
    <childComponentC></childComponentC> 
</section>

來源

2017-10-17 AngularM

如果你想保持你的代碼清潔和維護，而不必布爾標誌所有的地方，這將是最好使用的服務（也許叫ToggleService ）處理切換和檢查是否應該顯示的東西。

例如，下面是一個簡單的ToggleService，它使您能夠使用show/hide方法創建新項目，移除項目並切換項目的可見性（請記住，以下任何內容都經過測試，我簡直就是寫所有的飛行對這個問題 - 但是這一切似乎是合乎邏輯和應工作）：

@Injectable() 
export class ToggleService { 
    toggleMap: {[uniqueKey: string]: any} = {}; 

    create(key: string) { 
     this.toggleMap[key] = null; 
    } 

    remove(key: string) { 
     delete this.toggleMap[key]; 
    } 

    isShown(key: string): boolean { 
     return this.toggleMap[key]; 
    } 

    show(key: string) { 
     this.toggleMap[key] = true; 
    } 

    hide(key: string) { 
     this.toggleMap[key] = false; 
    } 
}

現在在你的組件，你可以利用該服務：

@Component({...}) 
export class MyComponent implements OnInit, OnDestroy { 
    constructor(public toggleService: ToggleService) {} 

    ngOnInit() { 
     this.toggleService.create('componentOne'); 
     this.toggleService.create('componentTwo'); 
     this.toggleService.create('componentThree'); 
    } 

    // Clean up when parent component is destroyed to save memory 
    ngOnDestroy() { 
     this.toggleService.remove('componentOne'); 
     this.toggleService.remove('componentTwo'); 
     this.toggleService.remove('componentThree'); 
    } 
}

在模板：

<button (click)="toggleService.show('componentOne')">Show component 1</button> 
<button (click)="toggleService.show('componentTwo')">Show component 2</button> 
<button (click)="toggleService.show('componentThree')">Show component 3</button> 

<componentOne *ngIf="toggleService.isShown('componentOne')"></componentOne> 
<componentTwo *ngIf="toggleService.isShown('componentTwo')"></componentTwo> 
<componentThree *ngIf="toggleService.isShown('componentThree')"></componentThree>

請記住，單擊其中一個按鈕不會隱藏另一個按鈕。爲此，您可能需要創建一個toggle方法，該方法將遍歷服務中的整個toggleMap，並將所有內容都設爲false，然後將唯一的一項設置爲true。

我會離開，最後一位作爲練習你;）

來源

2017-10-17 18:48:39 Lansana

蘭薩納·您好，我想可觀察到的主題將是在服務中更好地與這樣的對象{childAVisible：真等} – AngularM

在'ToggleService可觀察到的主題'在這裏也同樣適用。 – Lansana

我會與基於組件的設計去。在我看來，事件驅動設計並不酷，因爲很難跟蹤哪個組件與哪個事件發佈者進行交互。

Stackblitz example

<button (click)="changeFlag(CompFlags.Comp1)">Show comp1 </button> 
<br> 
<comp1 *ngIf="checkState(CompFlags.Comp1)" (clicked)="changeFlag(CompFlags.Comp2)"></comp1> 
<br> 
<comp2 *ngIf="checkState(CompFlags.Comp2)" (clicked)="changeFlag(CompFlags.Comp3)"></comp2> 
<br> 
<comp3 *ngIf="checkState(CompFlags.Comp3)"></comp3> 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html' 
}) 
export class AppComponent { 
    CompFlags = CompFlags; 
    state = CompFlags.None; 

    changeFlag(flag:CompFlags){ 
    (this.state & flag) ? this.state &= ~flag : this.state |= flag; 
    } 

    checkState(flag:CompFlags){ 
    return !!(this.state & flag); 
    } 
} 

export enum CompFlags{ 
    None = 0, 
    Comp1 = 1 << 0, 
    Comp2 = 1 << 1, 
    Comp3 = 1 << 2 
}

來源

2017-10-17 23:48:18 omeralper

在Angular2中，我需要顯示和隱藏父組件中的子組件

回答

相關問題