单击在角度不起作用

Question

Below is the code. The click event does not work with a nav-burger and a hidden menu.

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) { 

header html:

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

Answer 1

Instead of trying to bind to a property of MenuService, have MenuService emit an event:

menu.service.ts:

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

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

then listen to that event in your other component's and bind it to a local property.

export class HeaderComponent implements OnInit {
  opened: boolean;

  constructor(public menu: MenuService) { }

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