Question

我正在尝试更新＆＃39;侧边栏中可用的元素类别＆＃39;单击按钮时的组件，该按钮在名为＆＃39;标题＆＃39;

的其他组件中可用

我目前的设置：

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元素将获得类＆＃39; { {1}}＆＃39;

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

Answer 1

在@Output()中创建HeaderComponent并使用侧边栏进行连线：

@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中的其他组件更新组件的类

1 个答案: