将值传递给其他组件 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();
      }
    });
  }
}

由于这是我之前做过几次的代码，您可以忽略 ChangeDetectionRef.

中的 OnPush 策略

Answer 3

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

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

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

将值传递给其他组件 Angular

Passing value to other component Angular

typescript

angular-services

angular