从Angular2中的不同组件更新组件的类

Question

当单击按钮时，我正在尝试更新“侧边栏”组件中可用的元素类，该按钮在名为“标题”的不同组件中可用

我目前的设置：

app.ts

@Component({
  selector: 'my-app',
  template: `
    <div>
      <app-header></app-header>
      <app-sidebar></app-sidebar>
    </div>
  `,
})

header.ts

@Component({
  selector: 'app-header',
  template: '<header><button (click)="isActiveSidebar = false">close aside</button></header>'
})

export class HeaderComponent implements OnInit {
  isActiveSidebar = true;
}

sidebar.ts

@Component({
  selector: 'app-sidebar',
  template: '<aside [class.aside-hidden]="!isActiveSidebar">sidbar</aside>'
})

Plunkr https://plnkr.co/edit/7iTE8Nb4R0TbUqhYv3QG?p=preview

我在这里期待的是，当我单击标题组件中的按钮时，属性 isActiveSidebar 将设置为 false，而侧边栏组件中的 aside 元素将获得类 'aside-hidden'

当我在单个组件中使用相同的设置时，同样的设置对我有用。目前我不知道如何在两个不同的组件之间完成这项工作。如果您能通过更新给定的 plunkr 演示来帮助我，我将不胜感激。

Answer 1

在HeaderComponent 中创建一个@Output() 并将其与侧边栏连接起来：

@Component({
  selector: 'app-header',
  template: '<header><button (click)="deactivate()">close aside</button></header>'
})

export class HeaderComponent implements OnInit {
  @Output() deactivateSidebar:EventEmitter<bool> = new EventEmitter<bool>();
  isActiveSidebar = true;

  deactivate() {
    this.isActiveSidebar = false;
    this.deactivateSidebar.emit(null);
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <app-header (deactivateSidebar)="sidebar.deactivate()"></app-header>
      <app-sidebar #sidebar></app-sidebar>
    </div>
  `,
})

class AppSidebarComponent {
  deactivate() {
    this.isActiveSidebar = false;
  }
}