Angular 修改其他零部件的特性值而不更新视图角度2

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

该属性正在设置为新参数，但未更新视图

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

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

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

@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$;
  }
}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“应用程序主页”，
模板：“”
})
导出类标题组件{
私有所有权：string=“初始所有权”；
设置标题（参数）{
this.title=param；
}
}

appcomponent.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;
  }
}

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

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

@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$;
  }
}

从'@angular/core'导入{Component}；
从“/seo.title”导入{TitleComponent}；
@组成部分({
选择器：“应用程序标题”，
模板：`Some text`，
提供者：[标题组件]
})
导出类AppComponent{
构造函数（私有updateText:TitleComponent）{
setTitle（“他的文本被传递给子对象”）；
}
}

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

---

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

您将获得一些

实例，但这肯定不是您页面上显示的实例。您不能仅仅将

TitleComponent

注入到构造函数中，并期望它是正确的实例

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

---

有关如何在组件之间通信的更多详细信息，请参见您将获得一些

实例，但这肯定不是页面上显示的实例。您不能仅仅将

TitleComponent

注入到构造函数中，并期望它是正确的实例

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

---

有关如何在组件之间通信的更多详细信息，请参见注入到

应用程序组件中的标题组件与显示的实例不同
如果您希望能够在应用程序中的任何位置更新标题表单，则需要使用在
AppModule
请注意，
TitleComponent
中的
title
属性是可观察的，我使用了
async
管道-这样，只要底层的可观察对象发出新值，显示的标题就会更新

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

查看以下代码段（为了简单起见，导入了ommited）：

应用程序模块.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;
  }
}

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

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

@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$;
  }
}

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

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

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

@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$;
  }
}

@组件({
选择器：“应用程序主页”，
模板：“”
})
导出类TitleComponent实现OnInit{
标题$：可见；
构造函数（私有标题服务：标题服务）{}
恩戈尼尼特（）{
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);
  }
}

@Injectable（）
导出类标题服务{
私有标题源$：BehaviorSubject=新的BehaviorSubject（“默认标题”）；
获取标题$（）：可观察{
返回此.titleSource$.asObservable（）；
}
setTitle（newTitle:string）{
this.titleSource$.next（newTitle）；
}
}

更多阅读：



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

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

查看以下代码段（为了简单起见，导入了ommited）：

应用程序模块.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;
  }
}

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

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

@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$;
  }
}

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

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

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

@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$;
  }
}

@组件({
选择器：“应用程序主页”，
模板：“”
})
导出类TitleComponent实现OnInit{
标题$：可见；
构造函数（私有标题服务：标题服务）{}
恩戈尼尼特（）{
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);
  }
}

@Injectable（）
导出类标题服务{
私有标题源$：BehaviorSubject=新的BehaviorSubject（“默认标题”）；
获取标题$（）：可观察{
返回此.titleSource$.asObservable（）；
}
setTitle（newTitle:string）{
this.titleSource$.next（newTitle）；
}
}

更多阅读：



使用属性装饰器

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

使用属性装饰器

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

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