Question

引用此旧帖子： Angular 2 Dart: How to detect click on everything but element?

我正在尝试做同样的事情，但是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>

Answer 1

在Dart Angular 5中，不再支持document:...之类的全局事件侦听器。您仍然可以使用命令式变体

document.onClick.listen(...)

AngularDart5，元素外部点击时发生的事件

1 个答案: