当组件内部发生某些事情时，修改组件的视图

Question

让我们说我有两个组成部分：主页和编辑。

在主页组件中，当我点击＆＃34;添加帖子＆＃34;按钮，然后我显示editor组件。

主页组件的视图

<button (click)="showEditor()">Show editor</button>
<editorComponent *ngIf="clicked"></editorComponent>

showEditor()只需将clicked变量设置为true，然后会出现editor组件。

编辑器组件的视图

<div class="editor">
  ...some editor stuff
  <button (click)="cancel()">Cancel</button>
</div>

点击editor按钮后，我想在homepage组件中隐藏Cancel组件。为此，我应该再次将homepageComponent.clicked设置为false，但是如何在另一个组件中执行此操作。你有没有更好的主意？

Answer 1

我建议添加一个＆＃39;点击＆＃39; hp-component的值，传递给editor-component。如果修改了该值，则angular将识别此值并更新值并相应地查看。

不幸的是，JavaScript按值传递基元，所以我们需要作弊：

class Wrapper {
  constructor( public value: any ) { }
}

将其添加到主页组件：

class HpComponent {
  clicked: Wrapper = new Wrapper(false);

  showEditor() { clicked.value = true; }
}

class EditorComponent {
  @Input() clicked: Wrapper;

  cancel() { clicked.value = false; }
}

并将对象传递给编辑器组件：

<button (click)="showEditor()">Show editor</button>
<editorComponent *ngIf="clicked.value" [clicked]="clicked"></editorComponent>

免责声明：我对angular2很新，所以这可能不是最好的答案。 AFAIK Typescript提供泛型，您可以在包装类中实现它们。

Answer 2

使用@Output事件。子组件将发出父通过绑定订阅的事件。

homepage.html

<editor (cancelClickedEvent)="cancelEvent"></editor>

homepage.ts

cancelEvent(data) {
  // hide editor component
}

editor.html

<div class="editor">
  ...some editor stuff
  <button (click)="cancel()">Cancel</button>
</div>

editor.ts文件

@Output
cancelClickedEvent: any = new EventEmitter<any>();

onCancelClick() {
  this.cancelClickedEvent.emit(data) // <-- data is whatever you want
}