angular - ng-template 上不能有事件？嵌入式模板上的任何指令均未发出事件绑定(bind)单击

标签 angular angular-ng-if

我试图简单地使用 *ngIf ;else 来呈现按钮，但不断收到此错误。看来我的 ng-template 上没有事件？这不可能。我一定是在做一些明显错误的事情。

事件名称(点击)显然拼写正确，据我所知，我需要浏览器和公共(public)模块的所有指令都被导入并列在 NgModule 元数据中。

错误:

Event binding click not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations".



这是我为这个问题找到的唯一真正的解决方案:
Solution 1但是我将 BrowserModule 和 CommonModule 都导入了 AppModule 和最接近发生错误的模块。

Event binding click not emitted by any directive on an embedded template. Make sure that the event name is spelled correctly and all directives are listed in the "@NgModule.declarations".

非常接近只使用两个 *ngIfs(仅供引用)......为什么我的 ng-template 上不能有一个事件？
我已经用一个属性替换了 changeViewState() 并将(单击)事件更改为(激活)和(鼠标悬停)事件......它似乎不像 ng-template 上的任何(事件)......

我已经在我的应用程序周围复制粘贴了问题代码，但每次都会出错。

“问题代码”:
<div *ngIf="(this.stateUserReqValid === 'userInfo' || this.stateUserReqValid === 'orgInfo' || this.stateUserReqValid === 'supInfo' || this.stateUserReqValid === 'secInfo'); else ele"
  class="userManHover" (click)="changeViewState('userInfo');" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
  <h4 class="font-weight-light">
    <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='userInfo'}">1 </span> User Information &nbsp;
    <span class="icon-accept user-man-accept"></span>
  </h4>
</div>
<ng-template #ele class="userManHover" (click)="changeViewState('userInfo')" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
  <h4 class="font-weight-light">
    <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='userInfo'}">1 </span> User Information &nbsp;
    <span class="icon-accept user-man-accept"></span>
  </h4>
</ng-template>

新用户.component.html
<!-- <app-page-header [icon]="'fa fa-users'"></app-page-header> -->
<!-- <app-page-header [heading]="'User Management'" [icon]="'fa fa-users'"></app-page-header> -->



<!-- BLADE LAYER 1 -->
<div class="blade" [@routerTransition]>
  <div class="blade-header">
    <!-- <div class="blade-header" [ngClass]="{'is-minimized-header':minimizeVar}"> -->
    <h3>NEW USER REQUEST</h3>
  </div>


  <!-- [ngClass]="{'feature-nav-button': portalState =='portal-a', 'click-portal-style': portalState =='portal-a'}" -->

  <!-- BLADE Contents -->
  <div class="blade-contents">

    <!-- <div *ngIf="((this.stateUserReqValid != 'userInfo') || (this.stateUserReqValid != 'orgInfo') || (this.stateUserReqValid != 'supInfo') || (this.stateUserReqValid != 'secInfo'))" class="userManHover" (click)="changeViewState('userInfo');" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='userInfo'}">1 </span> User Information &nbsp;
        <span class="icon-right user-man-chevron"></span>
      </h4>
    </div> -->

    <div *ngIf="(this.stateUserReqValid === 'userInfo' || this.stateUserReqValid === 'orgInfo' || this.stateUserReqValid === 'supInfo' || this.stateUserReqValid === 'secInfo'); else ele"
      class="userManHover" (click)="changeViewState('userInfo');" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='userInfo'}">1 </span> User Information &nbsp;
        <span class="icon-accept user-man-accept"></span>
      </h4>
    </div>
    <ng-template #ele class="userManHover" (click)="changeViewState('userInfo')" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='userInfo'}">1 </span> User Information &nbsp;
        <span class="icon-accept user-man-accept"></span>
      </h4>
    </ng-template>


    <div *ngIf="this.stateUserReqValid != 'orgInfo'" class="userManHover" [ngClass]="{'userManSelect': stateUserReq =='orgInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='orgInfo'}">2 </span> Organization &nbsp;
        <span class="icon-right user-man-chevron"></span>
      </h4>
    </div>
    <!-- <div *ngIf="this.stateUserReqValid === 'userInfo' || this.stateUserReqValid === 'orgInfo' || this.stateUserReqValid === 'supInfo' || this.stateUserReqValid === 'secInfo'" class="userManHover" (click)="changeViewState('orgInfo');" [ngClass]="{'userManSelect': stateUserReq =='orgInfo'}"> -->
    <div *ngIf="this.stateUserReqValid === 'orgInfo'" class="userManHover" (click)="changeViewState('orgInfo');" [ngClass]="{'userManSelect': stateUserReq =='orgInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='orgInfo'}">2 </span> Organization &nbsp;
        <span class="icon-accept user-man-accept"></span>
      </h4>
    </div>


    <div *ngIf="this.stateUserReqValid != 'userInfo' || this.stateUserReqValid != 'orgInfo' || this.stateUserReqValid != 'supInfo' || this.stateUserReqValid != 'secInfo'"
      class="userManHover" [ngClass]="{'userManSelect': stateUserReq =='supInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='supInfo'}">3 </span> Supervisor &nbsp;
        <span class="icon-right user-man-chevron"></span>
      </h4>
    </div>
    <div *ngIf="this.stateUserReqValid === 'supInfo'" class="userManHover" (click)="changeViewState('supInfo');" [ngClass]="{'userManSelect': stateUserReq =='supInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='supInfo'}">3 </span> Supervisor &nbsp;
        <span class="icon-right user-man-chevron"></span>
      </h4>
    </div>

    <div *ngIf="this.stateUserReqValid != 'secInfo'" class="userManHover" [ngClass]="{'userManSelect': stateUserReq =='secInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='secInfo'}">4 </span> Security Profiles &nbsp;
        <span class="icon-right user-man-chevron"></span>
      </h4>
    </div>
    <div *ngIf="this.stateUserReqValid === 'secInfo'" class="userManHover" (click)="changeViewState('secInfo');" [ngClass]="{'userManSelect': stateUserReq =='secInfo'}">
      <h4 class="font-weight-light">
        <span class="blade-2-number" [ngClass]="{'blade-2-activated-number' :  stateUserReq =='secInfo'}">4 </span> Security Profiles &nbsp;
        <span class="icon-right user-man-chevron"></span>
      </h4>
    </div>
  </div>
</div>

<div *ngIf="stateUserReq === 'userInfo'">
  <new-user-req></new-user-req>
</div>
<div *ngIf="stateUserReq === 'orgInfo'">
  <new-user-org-info></new-user-org-info>
</div>
<div *ngIf="stateUserReq === 'supInfo'">
  <new-user-supervisor-info></new-user-supervisor-info>
</div>
<div *ngIf="stateUserReq === 'secInfo'">
  <new-user-security-info></new-user-security-info>
</div>

新用户.component.ts
import { UserReqViewStateService } from './../../../shared/services/UserManagement/UserReqViewState.service';
// import { PageHeaderModule } from './../../../shared/page-header/page-header.module';
import { UserManagementModule } from './../user-management.module';
import { Component, OnInit, DoCheck } from '@angular/core';
import { routerTransition, slideToRight, slideToLeft } from '../../../router.animations';
import { Router, NavigationEnd } from '@angular/router';

import { NewUserReqComponent } from './new-user-req/new-user-req.component';  //bringing accessability/form validation state from child
import { UserReqValidStateService } from '../../../shared/services/UserManagement/UserReqValidState.service';


@Component({
  selector: 'new-user',
  templateUrl: './new-user.component.html',
  styleUrls: ['./new-user.component.css'],
  host: {
    'class': 'blade-container'
  },
  animations: [slideToRight()]
})
export class NewUserComponent implements OnInit, DoCheck {

  stateUserReq: string = 'userInfo';

  stateUserReqValid: string;

  constructor(private router: Router, private viewstate: UserReqViewStateService, private validstate: UserReqValidStateService) { }

  ngDoCheck() {
    console.log(this.stateUserReqValid)
  }

  ngOnInit() {
    this.viewstate.currentState.subscribe(stateUserReq => this.stateUserReq = stateUserReq)
    this.validstate.currentState.subscribe(stateUserReqValid => this.stateUserReqValid = stateUserReqValid)
  }

  changeViewState(state) {
    this.viewstate.changeState(state);
  }


  private scrollToSectionHook() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        const tree = this.router.parseUrl(this.router.url);
        if (tree.fragment) {
          const element = document.querySelector('#' + tree.fragment);
          if (element) {
            setTimeout(() => {
              element.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
            }, 500);
          }
        }
      }
    });
  }


}

用户管理.module.ts
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ReactiveFormsModule } from '@angular/forms';

import { HttpModule, JsonpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
// import 'rxjs/add/operator/map';
import { NgModule, Type, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GridAllModule } from '@syncfusion/ej2-ng-grids';
import { HttpClientModule } from '@angular/common/http';


import {
  GridModule, ToolbarService, EditService, SortService, GroupService, FilterService, PageService,
  ContextMenuItem, PdfExportService, ExcelExportService, ContextMenuService, ResizeService,
  DataSourceChangedEventArgs, DataStateChangeEventArgs
} from '@syncfusion/ej2-ng-grids';


import { UserManagementComponent } from './user-management.component';
import { PageHeaderModule } from './../../shared';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';


// import { NewUserComponent } from './new-user/new-user.component';
// import { PendingUserComponent } from './pending-user/pending-user.component';
// import { ProcessUserComponent } from './process-user/process-user.component';
// import { NewUserReqComponent } from './new-user/new-user-req/new-user-req.component';

import { RouterModule } from '@angular/router';
import { NewUserOrgInfoComponent } from './new-user/new-user-org-info/new-user-org-info.component';
import { NewUserSupervisorInfoComponent } from './new-user/new-user-supervisor-info/new-user-supervisor-info.component';
import { NewUserSecurityInfoComponent } from './new-user/new-user-security-info/new-user-security-info.component'; //??????????
import { NewUserComponent } from './new-user/new-user.component';
import { PendingUserComponent } from './pending-user/pending-user.component';
import { ProcessUserComponent } from './process-user/process-user.component';
import { NewUserReqComponent } from './new-user/new-user-req/new-user-req.component';
import { UserManagementBladeComponent } from './user-management-blade/user-management-blade.component';
import { UserReqValidStateService } from '../../shared/services/UserManagement/UserReqValidState.service';



@NgModule({
  imports: [
    CommonModule,
    PageHeaderModule,
    GridModule,
    RouterModule,
    NgbModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    BrowserModule,
    CommonModule
  ],
  declarations: [UserManagementComponent, NewUserComponent, ProcessUserComponent, PendingUserComponent, NewUserReqComponent, NewUserOrgInfoComponent, NewUserSupervisorInfoComponent, NewUserSecurityInfoComponent, UserManagementBladeComponent],
  providers: [EditService, ToolbarService, SortService, GroupService, FilterService, PageService,
    ContextMenuService, PageService, ResizeService, PdfExportService, ExcelExportService, UserReqValidStateService]
})
export class UserManagementModule {
}

app.module.ts
import { PageHeaderModule } from './shared/components/page-header/page-header.module';

import { environment } from './../environments/environment';

// Support imports
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule, HttpClient, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

// import services
import { WebApiService } from './shared/services/webapi/web-api.service';
import { UserService } from './shared/services/UserManagement/User.service';
import { LogService } from "./shared/services/logging/log.service";
import { LogPublishersService } from "./shared/services/logging/publishers/LogPublishers.service";

// Security
import { GWIAuthService } from "./shared/services/authService/gwiAuth.service";

// Import Components
import { AppComponent } from './app.component';
import { NotFoundComponent } from './not-found/not-found.component';
import { LandingComponent } from './landing/landing.component';

// Import feature modules
import { LayoutModule } from './layout/layout.module';

// Routing Module
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UserManViewStateService } from './shared/services/UserManagement/UserManViewState.service';
import { Guardian } from './shared/services/authService/guardian';
import { UserReqViewStateService } from './shared/services/UserManagement/UserReqViewState.service';
import { UserReqValidStateService } from './shared/services/UserManagement/UserReqValidState.service';




@NgModule({
  declarations: [AppComponent, NotFoundComponent, LandingComponent],
  imports: [
    CommonModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    BrowserAnimationsModule,
    HttpClientModule,
    NgbModule.forRoot(),
    LayoutModule,
    ReactiveFormsModule,
    FormsModule,
    AppRoutingModule,
    PageHeaderModule
  ],
  providers: [
    UserService,
    LogService,
    LogPublishersService,
    WebApiService,
    GWIAuthService,
    UserManViewStateService,
    UserReqViewStateService,
    UserReqValidStateService,
    Guardian
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

最佳答案

您可以将事件绑定(bind)到包装容器(例如 HTML 标记)

<ng-template #ele  >
 <div (click)="changeViewState('userInfo')" class="userManHover" [ngClass]="{'userManSelect': stateUserReq =='userInfo'}">
  ...
  </div>
</ng-template>

关于angular - ng-template 上不能有事件？嵌入式模板上的任何指令均未发出事件绑定(bind)单击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50662072/

上一篇：nginx - localhost 发送了无效响应。 ERR_INVALID_HTTP_RESPONSE

下一篇：正则表达式查找括号和文本

相关文章：

javascript - 如何在 FormGroup 内动态生成 FormControl？

angularjs - 同一元素上的多个自定义 ng-if 指令

javascript - 需要 ng-repeat 的 Angular 方向吗？

javascript - ng-如果不工作，ng-show 工作

angular - 我如何在 Angular 应用程序中使用 xlsx 库删除列

java - 混合基础镜像的 Docker 镜像

javascript - Angular 6 辅助路由

javascript - 错误类型错误: this.route.params.flatMap不是函数

javascript - 使用 Angular 有条件地显示选择中的选项

html - ngIf 仍然在 false 条件下渲染 div

©2024 IT工具网  联系我们