Angular 2有条件地显示或隐藏组件

Question

我有3个按钮和3个组件，我的需求是初始状态下只显示第一个元素。点击按钮将显示相关组件并隐藏不相关的组件。你会如何实现？

@Component({
    selector: 'Parent',
    template: `
        <div class="tab">
            <span class="btn">show child 1</span>
            <span class="btn">show child 2</span>
            <span class="btn">show child 3</span>
        </div>
        <Child1></Child1>
        <Child2></Child2>
        <Child3></Child3>
    `,
})
export class ParentComponent  {
}

- angry kiwi

---

这个 Plunker 将会给你一个很好的理解 https://embed.plnkr.co/NzMrJixtwZv0l2ohiZgQ/ - J J B

Answer 1

@Component({
    selector: 'Parent',
    template: `
        <div class="tab">
            <span (click)="show('show1')" class="btn">show child 1</span>
            <span (click)="show('show2')" class="btn">show child 2</span>
            <span (click)="show('show3')" class="btn">show child 3</span>
        </div>

        <div *ngIf="show1"><Child1></Child1></div>
        <div *ngIf="show2"><Child2></Child2></div>
        <div *ngIf="show3"><Child3></Child3></div>
    `
})


export class ParentComponent  {
    public show1 = true;
    public show2 = false;
    public show3 = false;

    show(tab){
        this.show1 = false;
        this.show2 = false;
        this.show3 = false;

        console.log(tab)
        if(tab == 'show1') {
            this.show1 = true
        }
        if(tab == 'show2') {
            this.show2 = true
        }
        if(tab == 'show3') {
            this.show3 = true
        }
    }
}

代码很粗糙，请按您喜欢的方式进行优化。 但是，希望您明白我的意思。

- Ajey

---

为什么要踩？根据问题，答案似乎是正确的。 - Pardeep Jain

请给出解释或更好的解决方案，不要轻易点踩。 - Ajey

Answer 2

第一种选择是使用懒加载来解决这个问题。可以参考Angular 懒加载。

如果您不想使用懒加载并希望按照 Ajey 的答案进行操作，您可以按照以下方式编写更少的代码。

  @Component({
  selector: "Parent",
  template: `
    <div class="tab">
      <span (click)="curStep = 'step1'" class="btn">show child 1</span>
      <span (click)="curStep = 'step2'" class="btn">show child 2</span>
      <span (click)="curStep = 'step3'" class="btn">show child 3</span>
    </div>

    <div *ngIf="curStep == 'step1'"><child1></child1></div>
    <div *ngIf="curStep == 'step2'"><child2></child2></div>
    <div *ngIf="curStep == 'step3'"><child3></child3></div>
  `
})
export class ParentComponent {
    curStep: string = "step1";
}

- Md. Amanullah