如何在Angular 5中将一个组件的变量更改为另一个组件的变量

Question

I am new in Angular and trying to achieve simple logic.

enter image description here

sidebar.component.ts

import { Component, OnInit,Input } from '@angular/core';
import { FormComponent } from 'app/form/form.component';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {
  public serverStatus1 :boolean=false;
  public serverStatus2 :boolean=false;
  s1:number;
  s2:number=0;
  ngOnInit() {
        setInterval(() => {
        this.turnOnServers();
    }, 1000);
  }

  constructor() {

  }

  turnOnServers()
  {
    this.s2=this.s2+1;
    console.log(this.serverStatus1,"I am from turnOnServers",this.s2);
  }

  turnOnServer(id:string)
  {

    if(id==="1")
    {
      this.serverStatus1=!this.serverStatus1;
      console.log(this.serverStatus1,"I am from turnOnServer");
    }

    else if(id==="2")
    {
      this.serverStatus2=!this.serverStatus1;
      console.log(this.serverStatus2, "I am from turnOnServer");
    }
  }

form.component.ts

import { Component, OnInit,EventEmitter,Output,Input } from '@angular/core';
    import { NgForm } from '@angular/forms';
    import { SidebarComponent } from 'app/sidebar/sidebar.component';

    @Component({
      providers:[SidebarComponent],
      selector: 'app-form',
      templateUrl: './form.component.html',
      styleUrls: ['./form.component.css']
    })
    export class FormComponent implements OnInit {


      formstatus=false;
      user={
        username:"",
        password:""
      }
      constructor(private comp: SidebarComponent) { }

      ngOnInit() {
      }


      onSubmit(form:NgForm)
      {
        console.log(form);
        if(form.valid)
        {
          this.formstatus=true;
          this.user.username=form.value.username;
          this.user.password=form.value.password;

          if(form.value.username==="server1")
          {
            if(form.value.password==="s1")
            {
              this.comp.serverStatus1=!this.comp.serverStatus1;
              console.log(this.comp.serverStatus1,"I am from form" );

            }
          }

          if(form.value.username==="server2")
          {
            if(form.value.password==="s2")
            {
              this.comp.serverStatus2=!this.comp.serverStatus2;
              console.log(this.comp.serverStatus2,"I am from form" );

            }
          }
        }
      }

    }

These are above code for both the components. i am changing serverStatus2 from this -> this.comp.serverStatus2 of sidebar component the value changes for a sec but when setInterval() fetch the value from same variable it changes back to false. I don't know what is happening.

Answer 1

Components should be used for presentation, not storing data or app state. This job is better suited for a service. Guide: https://angular.io/tutorial/toh-pt4

Answer 2

The best way would be to pass an observable of the data you want to pass to your other component.

const yourData$ = Observable.of(yourData);

And then pass this observable as an input of your other component. In your component you subscribe to this observable so that you can update your component when the observable returns a new value

yourData$.subscribe((newValue) =>   { 
valueUsedInComponent = newValue; 
});

Otherwise you could create a service that will make the two components communicate, using the same concept of subscribing to the observable of created In your parent component.