Question

我有3个组件：“入门左侧”，“入门内容”，“相机”。 1个服务“ generalParameters”。在generalParameters中，我有2个属性； “ contentHeader”和contentDescription分别具有默认字符串值。

在初始化starter-content时，我从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";
}

starter-content.component.html

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

starter-content.component.ts

pageHeader: string;
description: string;

constructor(
  private gp: GeneralparametersService
) { }

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

starter-left-side.component.ts

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

starter-left-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，因此我们只能采用所需的属性并分别进行渲染。

请参阅我的实现。希望能帮助到你！！！

starter-left-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});
  }

starter-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'));
  }

starter-content.component.html

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

Answer 2

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

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

starter-content.component.html

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

starter-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;
  });
}

starter-left-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);
}

starter-left-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>

从另一个组件更改一个组件的属性，并在HTML中以角度2

2 个答案: