更改父属性更改的最佳方法[重复]答案

【问题标题】：Best way to change for parent property change [duplicate]更改父属性更改的最佳方法[重复]
【发布时间】：2017-11-09 17:03:42
【问题描述】：

我有这个结构：

@Component({
 selector: "parent-component",
 template: `
 <div>
  <child-component *ngIf='isLogin'></child-component>
 </div>
  `,
})
export class ParentComponent {
  public isLogin = false;

  myFunction( ) {
    if (something) this.isLogin = true;
  }
}

和

@Component({
 selector: "dropteam-header-user",
 template: `
 <button (click)="trigger()">Click me</button>
`,
})
export class ChildComponent {

  trigger() {
    // change ParentComponent's isLogin property here
  }
}

我相信这是非常基本的东西。我只需要能够更改ChildComponent 中的ParentComponent 属性。 ParentComponent 应该也可以更改自己的属性。

谢谢。

【问题讨论】：

标签： angular

【解决方案1】：

您可以向您的子组件添加一个输出，如下所示

export class ChildComponent {
  @Output() loginStatusChanged : EventEmitter<boolean> = new EventEmitter<boolean>();
  trigger() {
    this.loginStatusChanged.emit(true); // or false
  }
}

然后在父组件中附加到这个事件

<dropteam-header-user (loginStatusChanged)="loginStatusChanged($event)"></dropteam-header-user>


export class ParentComponent {
  public isLogin = false;

  myFunction( ) {
    if (something) this.isLogin = true;
  }

  loginStatusChanged(val: boolean) {
    this.isLogin = val;
  }
}

【讨论】：