Question

我创建了一个侧边栏组件。切换班级visible以显示/隐藏侧栏。

SidebarComponent

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

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  private isVisible: boolean = false;

  constructor() { }

  public toggle(): void {
    this.isVisible = true;
  }

}

补充工具栏::模板:: HTML

<div class="sidebar left" id="{{isVisible}}" [ngClass]="{ 'cover visible': isVisible == true, 'uncover': isVisible == false }">

从另一个组件调用切换功能。

菜单组件

import { SidebarComponent } from "./../sidebar/sidebar.component";

export class MenuComponent {
    constructor(public sidebar: SidebarComponent) {
        /*code*/
    }
}

MenuComponent :: template :: html

<div class="top menu">
    <a class="item" (click)="sidebar.toggle()">
    <img src="assets/img/new-school.jpg">
  </a>
</div>

但是，从菜单组件点击id="{{isVisible}}"时，(click)="sidebar.toggle()"仍然是假的。如果我从isVisible功能调整toggle()的值，它就会得到更改。有什么建议吗？

角度4 - 双向绑定不起作用

0 个答案: