Question

我在重新渲染组件时遇到问题。我有一个breadcrumb组件，我希望其他组件能够通过调用方法来更新它。例如。说我有一个ViewContact组件，我希望该组件将面包屑中的活动页面设置为联系人的名称。

将面包屑组件注入ViewContact组件＆amp;我已经为breadcrumb设置了提供程序。 ViewContact组件正在调用面包屑组件上的方法，该组件又调用ngZone.run()，因为我读过该组件应该触发组件重新渲染。但事实并非如此。

我在这里创建了一个简单的Plunker：http://plnkr.co/edit/rWZ8ZGqmda1cieDmsc2s

我正在尝试使用注射实现的目标还是有更好的方法？

...谢谢

Answer 1

您可以使用EventEmitter和模板变量在兄弟姐妹之间进行通信。

export class OtherComponent implements OnInit {
  @Output() notifyOther:EventEmitter = new EventEmitter();

  ...

  updateBreadcrumb() {
    this.notifyOther.emit("changed " + (this.count++));
    //this._breadcrumb.setProperty("changed " + (this.count++));
  }
}

<breadcrumb #breadCrumb></breadcrumb>

<other-component (notifyOther)="breadCrumb.testProperty = $event"></other-component>

Plunker example

Answer 2

在您的情况下，您无法将Breadcrumb组件注入OtherComponent组件，因为它们没有父/子关系。即使您将第一个组件添加到提供程序中，这也不起作用：

providers: [Breadcrumb],

要么选择Günter提供的方法，要么选择共享服务：

import {Subject} from 'rxjs/Rx';

export class SharedService {
  property:string;
  property$:Subject<string> = new Subject();

  setProperty(newValue:string) {
    this.property = newValue;
    this.property$.next(this.property);
  }
}

在组件中，您将以这种方式使用此服务：

export class OtherComponent implements OnInit {
  count: number = 1;

  constructor( private service: SharedService) {
  }

  ngOnInit() {
    this.updateBreadcrumb();
  }

  updateBreadcrumb() {
    this.service.setProperty("changed " + (this.count++));
  }
}

(...)

export class Breadcrumb {
  @Input() testProperty: string = "Initial Value which hopefully will get changed";  

  constructor(private service:SharedService) {
    this.service.property$.subscribe((data) => {
      this.testProperty = data;
    });
  }
}

请参阅此plunkr：http://plnkr.co/edit/wPEnpTWeMM1qpQPyzpdc?p=preview。

有关组件互动的文档可能会让您感兴趣：

https://angular.io/docs/ts/latest/cookbook/component-communication.html

如何通过另一个组件触发组件在更新属性后在Angular 2中呈现？ ngZone.run（）不起作用

2 个答案: