AngularDart5, событие при нажатии за пределами элемента - PullRequest
Новая
       8

AngularDart5, событие при нажатии за пределами элемента

0 голосов
/ 30 сентября 2018

Ссылаясь на этот старый пост: Angular 2 Dart: Как обнаружить щелчок по всему, кроме элемента?

Я пытаюсь сделать то же самое, но document:click непохоже, работает с AngularDart 5.

Есть ли какие-либо изменения, или я делаю что-то не так?

header_component.dart 

@Component(
  selector: 'app-header',
  templateUrl: 'header_component.html',
  styleUrls: ['header_component.css'],
  directives: [
    coreDirectives,
    routerDirectives,
  ],
  exports: [RoutePaths, Routes],

)
class HeaderComponent {
  final DataService _dataService;
  @ViewChild('profileimg') Element profileImg;
  bool _profileImgSelected = false;

  DataService get dataService => _dataService;
  bool get profileImgSelected => _profileImgSelected;
  bool set profileImgSelected(bool value) => _profileImgSelected = value;

  HeaderComponent(this._dataService);

  @HostListener('document:click', ['\$event'])
  void onDocumentClick(MouseEvent e) {
    print("000000");
    if(profileImg.contains(e.target)) {
      print("111111");
//      _profileImgSelected = !_profileImgSelected;
    } else {
      print("222222");
      _profileImgSelected = false;
    }
  }
}

header_component.html 

<header>
    <nav>
        <a [routerLink]="RoutePaths.dashboard.toUrl()"
           [routerLinkActive]="'active-route'">Dashboard</a>
        <!--<a [routerLink]="RoutePaths.orders.toUrl()"-->
        <!--[routerLinkActive]="'active-route'">Orders</a>-->
        <!--<a [routerLink]="RoutePaths.warehouse.toUrl()"-->
        <!--[routerLinkActive]="'active-route'">Warehouse</a>-->
        <!--<a [routerLink]="RoutePaths.clients.toUrl()"-->
        <!--[routerLinkActive]="'active-route'">Clients</a>-->
    </nav>
    <div #profileimg id="profile" *ngIf="dataService.user != null">
        <img id="profile-img" [src]="dataService.user.photoURL" (click)="profileImgSelected=true" width="40" height="40">
        <p id="account-name"><strong>{{dataService.user.displayName}}</strong> ({{dataService.user.email}})</p>
    </div>
    <ul id="account-menu" *ngIf="profileImgSelected">
        <li (click)="dataService.signOut()">Logout</li>
        <li>Settings</li>
    </ul>
    <div id="login" *ngIf="dataService.user == null">
        <a (click)="dataService.signInWithGoogle()">Sign in with Google</a>
    </div>
</header>

1 Ответ

0 голосов
/ 01 октября 2018

Поддержка глобальных слушателей событий, таких как document:..., была удалена в Dart Angular 5. Вы по-прежнему можете использовать императивный вариант 

document.onClick.listen(...)
...