typescript - 错误类型错误:无法读取未定义的属性“nativeElement”得到错误
问题描述
嗨,我正在开发 Angular 7 项目,我已经使用 Angular @ViewChild 和 nativeElement 实现了一个 div 显示隐藏功能,但出现以下错误:- 错误类型错误:无法读取未定义的属性“nativeElement”。
我试图在网上了解和搜索,但没有得到任何解决方案。下面是我的代码,因此任何人都可以查看我的代码并建议对我的代码进行一些更改,以便我可以解决我的问题。谢谢!
import { HttpClient } from "@angular/common/http";
import { Theme } from "./../../../model/themes/themes.model";
import { MatDialog } from "@angular/material";
import { BaseResponse } from "./../../../model/BaseResponse.model";
import {
Component,
OnInit,
SecurityContext,
ViewChild,
ElementRef,
Renderer2,
Directive,
Input,
HostListener,
Inject,
ElementRef as ErrorProneElementRef
} from "@angular/core";
import { RedisCacheService } from "../../services/redis-cache.service";
import { UserSessionActions } from "src/app/model/user-session-actions/UserSessionActions.model";
import { Router, NavigationStart } from "@angular/router";
import { ChannelService } from "src/app/app-modules/channels/channel.service";
import { CommonDialogComponent } from "../../common-dialog/common-dialog.component";
import { Store } from "@ngrx/store";
import { Subscription } from "rxjs";
import { CommonService } from "../../services/common.service";
import * as fromLogin from "../../../store/auth/login/login.actions";
@Component({
selector: "app-header",
templateUrl: "./header.component.html",
styleUrls: ["./header.component.scss"]
})
export class HeaderComponent implements OnInit {
//_profilePanel: boolean = false;
_themePanel: boolean = false;
_modalData: string;
_stateData: any;
loggedInUserName: string;
loggedInUserEmail: string;
_jsonDarkMenu = "assets/json/Themes/darkTheme.json";
_jsonLightMenu = "assets/json/Themes/lightTheme.json";
_jsonDefaultTheme = "assets/json/Themes/defaultStandardTheme.json";
subscription: Subscription;
darkThemeArray: Theme[] = [];
lightThemeArray: Theme[] = [];
defaultTheme: Theme[] = [];
_userProfileView: boolean = false;
@ViewChild("clickOutsideCloseBtn") clickOutsideCloseBtn: ElementRef;
@ViewChild("userProfile") userProfile: ElementRef;
@ViewChild("themePanelShowHide") themePanelShowHide: ElementRef;
@ViewChild("themeCloseBtn") themeCloseBtn: ElementRef;
@ViewChild("header-disableProfileIcon") headerPreferenceToggle: ElementRef;
@ViewChild("header-user-profile-section") preferenceMenu: ElementRef;
dialogRef: any;
constructor(
private _redisCacheService: RedisCacheService,
private router: Router,
private _channelService: ChannelService,
private _dialog: MatDialog,
private store: Store<any>,
private renderer: Renderer2,
private http: HttpClient,
private commonService: CommonService,
myElement: ElementRef
) {
/**
* This events get called by all clicks on the page
*/
this.renderer.listen("window", "click", (e: Event) => {
/**
* Only run when toggleButton is not clicked
* If we don't check this, all clicks (even on the toggle button) gets into this
* section which in the result we might never see the menu open!
* And the menu itself is checked here, and it's where we check just outside of
* the menu and button the condition abbove must close the menu
*/
if (
!this.clickOutsideCloseBtn.nativeElement.contains(e.target) &&
!this.userProfile.nativeElement.contains(e.target)
) {
this._userProfileView = false;
}
});
this.renderer.listen("window", "click", (e: Event) => {
/**
* Only run when toggleButton is not clicked
* If we don't check this, all clicks (even on the toggle button) gets into this
* section which in the result we might never see the menu open!
* And the menu itself is checked here, and it's where we check just outside of
* the menu and button the condition abbove must close the menu
*/
if (
!this.themePanelShowHide.nativeElement.contains(e.target) &&
!this.themeCloseBtn.nativeElement.contains(e.target)
) {
this._themePanel = false;
}
});
}
/**
* This events get called by all clicks on the page
*/
ngAfterViewInit() {}
htmlContent: string;
private themeWrapper = document.querySelector("body");
ngOnInit() {
}
}
HTML 代码:-
<div>
<div
class="header-user-profile-section"
#userProfile
*ngIf="_userProfileView"
>
<ul class="header-user-profile-menu">
<li class="header-pad-bottom-0">
<span class="header-user-pofile-img"
><img
class="header-profile-icon"
src="../../../../assets/images/common/user-profile-placeholder.jpg"
alt="profile-img"
/></span>
</li>
<li>
<p class="header-username-txt">
{{ _stateData.userDetails.userFullName }}
</p>
<p class="header-secondary-text">
{{ _stateData.userDetails.userId }}
</p>
</li>
<li class="header-logout-btn ">
<button class="hb-btn-transparent" (click)="_logoutClickHandler()">
Logout
</button>
</li>
</ul>
</div>
</div>
解决方案
推荐阅读
- powerbi - 如何计算昨天、过去 7 天、本周到今天、本月到今天用户登录 power bi 的计数?
- linux - 如何找出哪种字体可以显示这些字符?
- node.js - 使用 heroku 从 vue 应用程序对 server.js 进行 ajax 调用
- google-cloud-platform - 在哪里可以找到 Google Cloud Platform Deep Learning VM 映像和 Deep Learning Containers 的源代码?
- reactjs - 如何使用 React Hooks 传递 props 和其他参数来运行?
- mongodb - MongoDB Compass 立即断开连接
- infinispan - Infinspan 控制台在缓存节点视图中仅显示集群服务器的一个节点
- ruby-on-rails - Rails 形成翻转的日期和月份
- python-3.x - 根据其他列的最大值选择列中的值
- html - 引导导航栏和 mdb 页脚在单页中不起作用