Question

我是Angular的新手并试图实现简单的逻辑。

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" );

            }
          }
        }
      }

    }

这些是两个组件的代码。我正在改变serverStatus2 - ＆gt;侧栏组件的this.comp.serverStatus2值变化一秒但是当setInterval（）从同一个变量中获取值时，它会变回false。我不知道发生了什么。

Answer 1

组件应该用于演示，而不是存储数据或应用状态。这项工作更适合服务。指南：https://angular.io/tutorial/toh-pt4

Answer 2

最好的方法是传递您想要传递给其他组件的可观察数据。

const yourData$ = Observable.of(yourData);

然后将此observable作为其他组件的输入传递。在您的组件中，您订阅了此observable，以便在observable返回新值时更新组件

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

否则，您可以创建一个服务，使两个组件进行通信，使用相同的概念来订阅在您的父组件中创建的observable。

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

2 个答案: