将值传递给其他组件Angular [关闭]

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（）按钮单击来切换值。