从另一个组件更改组件的属性，并在角度2的html中呈现它

Question

我有3个组件'starter-left-side'，'starter-content'，'camera'。 1服务'generalParameters'。 在generalParameters中，我有2个属性; 'contentHeader'和contentDescription分别具有默认字符串值。

在初始化内容初始化后，我从generalParameters获取这些值并在starter-content.html中呈现它。 当我想转到camera.component时，我只是通过starter-left-side点击了camera.component的链接，我在starter-left-side中有一个方法来设置generalProperties的属性值一旦点击链接，它就可以再次被初学者内容使用。

我可以成功更改generalProperties中的值，但问题是，它不再在starter-component中呈现。 我不知道生命周期钩子的哪个时候我应该再次从generalProperties获取值，以便它可以在starter-content.html中呈现。

generaParameters.service.ts

contentHeader: string;
contentDescription: string;

constructor() {
  this.contentHeader = "Dashboard";
  this.contentDescription = "This is your dashboard";
}

起动content.component.html

<h1>
  {{pageHeader}}
  <small>{{description}}</small>
</h1>

起动content.component.ts

pageHeader: string;
description: string;

constructor(
  private gp: GeneralparametersService
) { }

ngOnInit() {
  this.pageHeader = this.gp.contentHeader;
  this.description = this.gp.contentDescription;
}

起动左side.component.ts

setContent(header, description) {
  this.gp.contentHeader = header;
  this.gp.contentDescription = description;
}

起动左side.component.html

<li class="active"><a href="avascript:void(0);" (click)="setContent('Camera', 'Using Camera')" [routerLink]="['camera']"><i class="fa fa-link"></i> <span>Camera</span></a></li>

非常感谢您的帮助。

Answer 1

由于您使用服务进行通信，因此可以使用Subject传播更改

当您通过gp.setContent对主题进行更改时，因为您的其他组件正在观察更改，它们将自动更新。

我使用了pluck，因此我们只能获取所需的属性并单独渲染它们。

看我的实施。 希望能帮助到你！！！

起动左side.component.html

<li class="active"><a href="javascript:void(0);" (click)="gp.setContent('Camera', 'Using Camera')" [routerLink]="['camera']"><i class="fa fa-link"></i> <span>Camera</span></a></li>

generaParameters.service.ts

import { Subject } from 'rxjs';

  private mycontent$ = new Subject();

  public content$ = this.mycontent$.asObservable();

  setContent(header, description) {
    this.content$.next({header, description});
  }

起动content.component.ts

import { pluck } from 'rxjs/operators';
  ngOnInit(): void {
    this.pageHeader$ = this.gp.content$.pipe(pluck('header'));
    this.pageDescription$ = this.gp.content$.pipe(pluck('description'));
  }

起动content.component.html

<h1>
  {{pageHeader$ | async }}
  <small>{{pageDescription$ | async}}</small>
</h1>

Answer 2

在服务中使用Subject或BehaviorSubject。 因此，当值更改时，所有组件都会更新：

generaParameters.service.ts

import {BehaviorSubject, Observable} from 'rxjs';     

contentHeader: BehaviorSubject<string> = new BehaviorSubject('Dashboard');
contentDescription: BehaviorSubject<string> = new BehaviorSubject('This is your dashboard');

constructor() {}

public getContentHeader(): Observable<string> {
    return this.contentHeader.asObservable();
}

public setContentHeader(value: string): void {
    this.contentHeader.next(value);
}

public getContentDescription(): Observable<string> {
    return this.contentDescription.asObservable();
}

public setContentDescription(value: string): void {
    this.contentDescription.next(value);
}

起动content.component.html

<h1>
  {{pageHeader}}
  <small>{{description}}</small>
</h1>

起动content.component.ts

pageHeader: string;
description: string;

constructor(
  private gp: GeneralparametersService
) { }

ngOnInit() {
  this.gp.getContentHeader().subscribe(value => {
      this.pageHeader = value;
  });

  this.gp.getContentDescription().subscribe(value => {
      this.contentDescription = value;
  });
}

起动左side.component.ts

ngOnInit() {
   this.gp.getContentHeader().subscribe(value => {
      this.pageHeader = value;
   });

   this.gp.getContentDescription().subscribe(value => {
      this.contentDescription = value;
   });
}

setContent(header, description) {
  this.gp.setContentHeader(header);
  this.gp.setContentDescription(description);
}

起动左side.component.html

<li class="active"><a href="avascript:void(0);" (click)="setContent('Camera', 'Using Camera')" [routerLink]="['camera']"><i class="fa fa-link"></i> <span>Camera</span></a></li>