Question

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

该属性已设置为新参数，但未更新视图。

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），但视图没有得到更新。

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

Answer 1

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

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

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

Answer 2

注入TitleComponent的

AppComponent与显示的实例不同如果您希望能够在应用中的任何位置更新标题表单，则需要使用在AppModule中注册的服务请注意title中的TitleComponent属性是可观察的，并且我使用async管道 - 只要底层的observable发出新值，显示标题就会更新。

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

请查看以下代码段（为简单起见省略导入）：

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

更多阅读：
Angular2 component interactions
Rxjs documentation

Answer 3

使用属性装饰器

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

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

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

3 个答案: