Question

以下是代码。点击事件不适用于导航汉堡和隐藏菜单。

menu.component：

section class="hero outer is-primary is-fullheight animated slideInLeft" [ngClass]="{'is-hidden' : !menu.opened}">

menu.service.ts：

@Injectable()
export class MenuService {
  opened: boolean;

  constructor() { }
  open (){
    this.opened = true;
  }

}

header.component.ts：

@Component({
  providers: [MenuService],
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.sass']
})
export class HeaderComponent implements OnInit {

  constructor(public menu:MenuService) {

标题html：

 <div class="navbar-burger burger" (click)="menu.open()">
      <span></span>
      <span></span>
      <span></span>
    </div>

Answer 1

让MenuService发出一个事件：

，而不是尝试绑定到MenuService的属性

menu.service.ts：

@Injectable()
export class MenuService {
  opened = new EventEmitter<boolean>();

  constructor() { }
  open (){
    this.opened.emit(true);
  }
}

然后在您的其他组件中侦听该事件并将其绑定到本地属性。

export class HeaderComponent implements OnInit {
  opened: boolean;

  constructor(public menu: MenuService) { }

  ngOnInit() {
    this.menu.opened.subscribe((event) => { 
      this.opened = event;
    }
  }
}

单击不适用于角度

1 个答案: