在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中，我需要显示和隐藏父组件中的子组件

回答

相关问题