Question

我有一个带有按钮的侧边栏，点击后我想切换一个变量true或false，然后显示/隐藏一个兄弟组件。我收到错误Type '{}' is not assignable to type 'boolean'。我怎样才能以正确的方式实现这一目标？

边栏-menu.component.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'sidebar-menu',
  templateUrl: './sidebar-menu.component.html',
  styleUrls: ['./sidebar-menu.component.styl']
})
export class SidebarMenuComponent {

  showDetails = false;
  @Output()
  onShowDetails: EventEmitter<boolean> = new EventEmitter();

  constructor() {}

  toggleDetails() {
    this.showDetails = !this.showDetails;
    this.onShowDetails.emit(this.showDetails);
    console.log('Sidebar Toggle', this.showDetails);
  }

}

details.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.styl']
})
export class DetailsComponent {

  @Input() showDetails: boolean;

  constructor() {

  }

}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.styl']
})
export class AppComponent {
  @Input() showDetails: boolean = false;


  constructor() {
  }

}

app.component.html

<sidebar-menu></sidebar-menu>
<details *ngIf="showDetails"></details>
<router-outlet></router-outlet>

Answer 1

您的showDetails属性不是boolean类型，它的类型为EventEmitter<boolean>，当您尝试设置this.showDetails = false;之类的值时，它会抛出错误。试试这个：

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'sidebar-menu',
  templateUrl: './sidebar-menu.component.html',
  styleUrls: ['./sidebar-menu.component.styl']
})
export class SidebarMenuComponent {

  showDetails = false;
  @Output()
  onShowDetails: EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor() {    
  }

  toggleTeamDetails() {
    this.showDetails = !this.showDetails;
    this.onShowDetails.emit(this.showDetails);
    console.log('Sidebar Toggle', this.showDetails);
  }    
}

对此活动感兴趣的组件应订阅此活动。

此外，如果您想在模板中直接使用布尔值，您可以这样做：

<sidebar #sidebar>
    <child-component *ngIf="sidebar.showDetails"></child-component>
</sidebar>
<sibling-component *ngIf="sidebar.showDetails"></sibling-component>

打开一个兄弟组件

1 个答案: