Question

我有3个独立的组件

Comp1
Comp2
Comp3

显示Comp1点击Comp2并实现此显示/隐藏功能，我在*ngIf使用了Comp2。

现在我想要Comp2点击Comp3，我知道我可以通过*ngIf实现此目标。但Comp2已*ngIf来自Comp1，因此除非Comp1未发送任何标记Comp2，否则即使我尝试显示也不会显示Comp2来自Comp3的{{1}}。此问题的解决方案是将*ngIf与||运算符一起使用。但问题是如果Comp3将Comp2标志设置为true然后单击Comp1，Comp2上的标志将仅为真。

我无法弄清楚如何在点击不同组件上的2个不同按钮时显示相同的组件。

请帮助我解决逻辑问题，而不仅仅是逻辑帮助的代码。

Answer 1

您可以在这些组件之间使用共享服务，

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs';

@Injectable()
export class ComponentService {

  private isComponent1Clicked = false;
  private showComponent2 = new Subject<boolean>();
  showComponent2$ = this.showComponent2.asObservable();

  showComponent2(component: string) {
    if(component==='component1') 
    {
     isComponent1Clicked= true;
     this.showComponent2.next(true);
    }
    if(isComponent1Clicked && component==='component1')
       this.showComponent2.next(true);
  }
}

现在在所有三个组件中使用此服务。

export class ComponentOne {
   constructor(private componentService : ComponentService ) {
   }
   onClick()
   {
     this.componentService.showComponent2('component1');
   }
}


export class ComponentThree {
   constructor(private componentService : ComponentService ) {
   }
   onClick()
   {
     this.componentService.showComponent2('component2');
   }
}

//this parent for all three component
export class ComponentParent implements OnInit  {
   showMe:boolean = false; 
   constructor(private componentService : ComponentService ) {
   }
    ngOnInit() {
      this.componentService.showComponent2$.subscribe(data=> this.showMe = data); 
   }
}

在html文件中

   <component2 *ngIf= "showMe">

Answer 2

我不太清楚这些组件是如何相互作用的，但我认为你可以使用相同的变量（或相同的函数）与comp1和comp3的ng-click相关联。

function showOrHide (flag) {
    flag =! flag
}

这样每次点击comp1或comp2时，标志的值都会改变

Angular：点击2个不同的组件

2 个答案: