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

Question

我正在尝试在单击按钮时更新“侧边栏”组件中可用元素的 class，该按钮在名为 'header'

的不同组件中可用

我当前的设置：

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

我在这里期待的是，当我单击 header 组件中的按钮时，属性 isActiveSidebar 将设置为 false，侧边栏组件中的 aside 元素会得到 class '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;
  }
}

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

Update class of a component from a different component in Angular2

angular2-components

angular