从其他组件修改属性值不更新视图 angular2答案

【问题标题】：Modifying property value from other component not updating the view angular2从其他组件修改属性值不更新视图 angular2
【发布时间】：2016-09-06 11:58:20
【问题描述】：

我正在尝试从其他组件修改/更新组件的某些属性。

该属性正在设置为新参数，但它没有更新视图。

pagetitle.ts

import { Component, Input} from '@angular/core';
@Component({
  selector: 'app-home',
  template: '<h2 [innerHTML]="title"></h2>'
})
export class TitleComponent {
  private title: string = "Initial Title";
  setTitle(param) {
    this.title = param;
  }
}

appcomponent.ts

import { Component} from '@angular/core';
import {TitleComponent} from './seo.title';
@Component({
  selector: 'app-header',
  template: `<h3>Some text</h3>`,
  providers: [TitleComponent]
})
export class AppComponent {
  constructor(private updateText: TitleComponent) {
    updateText.setTitle("his text is passed to child");
  }
}

setTitle 函数完美接收参数并更新属性（this.title），但视图没有更新。

我不想处理嵌套组件。我想更新属性，以便我可以在任何地方使用。

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

您正在获得一些 TitleComponent 实例，但这肯定不是您页面上显示的实例。您不能只将TitleComponent 注入您的构造函数并期望这将是正确的实例。

在这种情况下，它甚至可能不是一个组件，而只是组件类的一个实例。

有关如何在组件之间进行通信的更多详细信息，请参阅https://angular.io/docs/ts/latest/cookbook/component-communication.html

【讨论】：

【解决方案2】：

TitleComponent 注入到您的AppComponent 与显示的实例不同如果您希望能够在应用程序的任何位置更新标题表单，您需要使用在AppModule 中注册的服务请注意，TitleComponent 中的 title 属性是可观察的，而我使用了 async 管道 - 这样显示的标题将在底层可观察对象发出新值时更新。

这样，任何导入TitleService 的组件/服务都将能够更新标题。

查看以下 sn-ps（为简单起见省略了导入）：

app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    TitleComponent
  ],
  imports: [
  ],
  providers: [
    TitleService
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

pagetitle.ts

@Component({
  selector: 'app-home',
  template: '<h2 [innerHTML]="title | async"></h2>'
})
export class TitleComponent implements OnInit {
  title$: Observable<string>;

  constructor(private titleService: TitleService) {}

  ngOnInit() {
    this.title$ = this.titleService.title$;
  }
}

title.service.ts

@Injectable()
export class TitleService {
  private titleSource$: BehaviorSubject<string> = new BehaviorSubject<string>("Default title");

  get title$(): Observable<string> {
    return this.titleSource$.asObservable();
  }

  setTitle(newTitle: string) {
    this.titleSource$.next(newTitle);
  }
}

【讨论】：

【解决方案3】：

使用属性装饰器

export class ExampleComponent {
@Input()
exampleProperty: string;
}

https://toddmotto.com/angular-decorators#decorator-functions

【讨论】：

如果你添加一些关于你的代码的解释会更好。