Question

如何从其他组件更改validCompo的值？有人谈论Angular服务来解决该问题，但是我不明白它是如何工作的。我尝试了很多事情，但没有任何效果...

是否可以在下面的示例中向我展示解决的好方法？

https://stackblitz.com/edit/angular-sc7zsc

非常感谢！

Answer 1

具有服务中定义的变量。在两个组件中注入服务。在事件处理程序中，更新服务中的变量，它将在两个地方都反映出来。

Answer 2

您可以使用Subject进行操作。请注意，您也可以使用@Input来实现此目的。

无论如何，这是一个简单的示例：https://stackblitz.com/edit/angular-vts7zd?file=src%2Fapp%2Ftest.component.ts

代码如下：

主要组成部分

export class AppComponent  {
  isEnglish = true;
  constructor(private service: CommonService){ }

  setLang(){
    this.isEnglish = !this.isEnglish;
    (this.isEnglish) ? this.service.setLang('IT') : this.service.setLang('EN');
  }
}

服务

@Injectable()
export class CommonService{
  private lang$ = new Subject<string>();
  public langEvent = this.lang$.asObservable();

  public setLang(lang){
    this.lang$.next(lang);
  }
}

处理更改的测试组件

export class TestComponent implements OnInit  {
  lang ="default";
  constructor(private service: CommonService, private cdr: ChangeDetectorRef) {}

  ngOnInit(){
    this.service.langEvent
    .subscribe(res => {
      if(!!res){
        this.lang = res;
        this.cdr.detectChanges();
      }
    });
  }
}

由于这是我几次执行的代码，因此您可以忽略OnPush中的ChangeDetectionRef策略。

Answer 3

在CompositionService中，创建一个变量validCompo = true。

在两个组件中都注入此服务。并将变量设置为接受服务的值。 validCompo = this.compositionService.validCompo;

现在，您可以在任何组件中的changeValue（）中使用按钮单击来切换值。

将值传递给其他组件Angular

3 个答案: