Question

在此，我正在练习主题命令。在inputpage上正在工作。但是当我通过routerlink导航到page1时。我没有看到名称的更新值。我不确定它是否有效。现在，我的猜测是，每当我离开输入页面时，我的变量 profile 都会在page1组件文件上重置吗？

page1.component.html

<div class="container page1">
  <p>{{profile.name}}</p>
</div>

page1.component.ts

import { InputpageComponent } from './../inputpage/inputpage.component';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-page1',
  templateUrl: './page1.component.html',
  styleUrls: ['./page1.component.css']
})
export class Page1Component implements OnInit {
  profile: Profile = {name: "sanam", email: "sdasdsdas"};

  constructor(private inputPage: InputpageComponent) {
    this.inputPage.subject.subscribe(dataRec => { 
    this.profile = dataRec.value;
    console.log("Updated");
    })
   }

  ngOnInit() { }  
}

inputpage.component.ts

import { Component, OnInit } from '@angular/core';
import { Subject } from "rxjs";


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

  constructor() { }

  subject = new Subject<any> ();

  btnClicked(data){
    this.subject = data.value;
    console.log(this.subject);

  }

  ngOnInit() { }

inputpage.component.html

<div class="container inputPage">
  <h3>Submit Form</h3>
  <div class="formsbt">
    <form (ngSubmit)="btnClicked(f)" #f="ngForm">
      <label for="name">Name</label>
      <input class="formsbt" type="text" id="name" ngModel name="name">
      <label for="email">Email</label>
      <input class="formsbt" type="text" id="email" ngModel name="email">
      <button class="formsbt" type="button" class="btn btn-primary" type="submit"  > Submit </button>
    </form>
  </div>
  <h1>{{subject.name}}</h1>
</div>

Answer 1

您应该在要具有“数据逻辑”的位置创建服务，然后将该服务注入需要这些数据的组件中。

应该注入服务，而不要在private inputPage: InputpageComponent中插入page1.component.ts。

另一件事是，当您订阅Subject时，如果在发出数据后进行了订阅，则不会获得最后的数据。您应该改用BehaviorSubject。为了确保您在每个订阅中都能获取最新数据。

此外，如果您要将新数据传递给Subject或BehaviorSubject，则不是在分配数据而是调用next()方法：

this.subject.next(data.value);

主题RxJS不更新另一个组件中的变量

1 个答案: