在Angular2中，我需要从父组件中显示和隐藏子组件 [英] In Angular2 I need to show and hide child components from within a parent component

问题描述

在Angular2中，如何最好地显示和隐藏子组件?

我有一个父组件和三个子组件.

默认情况下， onInit 需要隐藏所有子组件. 并且 childComponentA 需要在父组件中显示按钮的单击.

By default onInit all child components need to be hidden. And childComponentA needs to show onclick of a button in the parent component.

流程:

我在 childComponentA 中有一个按钮，该按钮需要在单击时显示 childComponentB ，而childComponentB组件有一个按钮需要显示 childComponentC .就像秀场和秀场一样.

I have a button in childComponentA that needs to show childComponentB on click and childComponentB component has a button that needs to show childComponentC. So like a flow of show and hides.

如何做到最好?

可能的解决方案?

我当时正在考虑创建一个服务，所有子组件都可以订阅该服务以显示和隐藏.但不确定是否是最佳解决方案.

I was thinking of creating a service that all the child components subscribe to show and hide. But not sure if its the best solution.

父组件HTML:

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

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

推荐答案

如果您想保持代码的清洁和可维护性，并且不希望到处都有布尔标志，最好使用服务(也许称为ToggleService)，用于切换和检查是否应显示某些内容.

If you want to keep your code clean and maintainable, and not have boolean flags all over the place, it would be best to use a service (maybe called ToggleService) which handles the toggling and checking of whether or not something should be shown.

例如，这是一个简单的ToggleService，它使您能够使用show/hide方法创建新项目，删除项目并切换项目的可见性(请记住，下面的内容均未经过测试，我实际上是只是针对此问题即时编写了所有内容-但这似乎合乎逻辑，应该可以):

For instance, here is a simple ToggleService that gives you the ability to create new items, remove the items, and toggle the visibility of the items with show/hide methods (keep in mind nothing below is tested, I literally just wrote it all on the fly for this question -- but it all seems logical and should work):

@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;
    }
}

现在在您的组件中，您可以利用该服务:

Now in your component, you can leverage the service:

@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并将所有内容都设置为假，然后仅将一件设置为true.

Bear in mind that clicking one of the buttons will not hide another button. For that, you may want to create a toggle method which will loop through the entire toggleMap in the service and make everything false, and then set only one thing to true.

我将把最后一点留给您作为练习；)

I'll leave that last bit as an exercise for you ;)

这篇关于在Angular2中，我需要从父组件中显示和隐藏子组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！