tnblog
首页
视频
资源
登录

Angular使用组件时遇到的一些错误整理

4922人阅读 2019/11/4 14:57 总访问:3259190 评论:0 收藏:0 手机
分类: 前端

先看看代码

  1. export class SidenavComponent implements OnInit {
  2.   private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);
  3.   constructor(
  4.     private router: Router,
  5.     zone: NgZone) {
  6.     this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));
  7.   }
  8.   @ViewChild(MatDrawer) drawer: MatDrawer;
  9.   ngOnInit() {
  10.     this.router.events.subscribe(() => {
  11.       if (this.isScreenSmall()) {
  12.         this.drawer.close();
  13.       }
  14.     });
  15.   }
  16.   isScreenSmall(): boolean {
  17.     return this.mediaMatcher.matches;
  18.   }
  19. }

看着没什么错

实际根据版本的不同会有问题

(1)this未明确指明某对象

  1. this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));

需改成

  1. this.mediaMatcher.addListener(mql => {
  2.       zone.run((x) =>x.mediaMatcher = mql)
  3.     });

(2)这里也是更具版本的不同也会遇到问题

  1. @ViewChild(MatDrawer) drawer: MatDrawer;

需改成

  1. @ViewChild(MatDrawer,{ static:true }) drawer: MatDrawer;


后续会写一些Angluar多路由配置


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739

评价

Angular使用第三方资源(举例面向插件)

问题Example :我们需要一张svg到页面中1.把图片放在assets文件夹下面以move.svg为例2.需要对单个资源进行模板注册import{C...

Angular使用Proxy

Multiple entriesIf you need to proxy multiple entries to the same target define the configuration inproxy.conf.jsin...

Angular路由导航配置

开发工具:VSCode打开终端输入命令创建crisis-list和hero-list组件nggeneratecomponentcrisis-listnggeneratecomponenthero...

Angular环境搭建

开发工具:vscode命令执行:快捷键( Ctrl+Shift+` )或者打开终端近期一直写有关前端的东西,其实我是学后端C#.NET的,但是在...

Angular常用的创建命令

Angular开发在Angular开发中常见的一些命令创建命令ng generate component example 生成组件带有模版ng generate component...

关于Angular常用的创建命令。

在Angular开发中常见的一些命令创建命令ng generate component example生成组件带有模版ng generate component example -it...

基于Angular的HttpClient封装_HttpClient

基于angular的HttpClient封装_HttpClient,直接复制源码即可用包含常用的get、post、patch、delete和put请求;import{HttpC...

Angular使用加载指示符loading的ngx-loading

前言欢迎使用tnblog如果你的项目是纯angular需要用到请求或者其他方式时在在界面上通过loading的方式来展示请求进度或其他...

Angular与Layui框架集成使用

目录" class="reference-link">目录 目录前言初使用 下载layui资源包创建angular项目 搭建angular环境(已搭建忽略)创...

Angular与Layui框架集成使用(优化)

在使用后很多入坑 全局引入所有模块 Layui的所有模块可以全部一次性加载 所有模块可通过layui/lay/modules,这里可...

Angular路由复用策略 (切换tabs页面内容不丢失,保持原来状态)

一、引言 路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除;当然在绝大多数场景下这是合理的。进入...

Angular路由复用策略

路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除;当然在绝大多数场景下这是合理的。进入组件时会执...

vs core 运行报An unhandled exception occurred: spawn EPERM See "C:\Users\ADMINI~1\AppData\Local\Temp\ng-HWFidp\Angular-errors.log"

前言:hello,大家好 I’m小付 好久不见,老实巴交的我又出现了, 今天给大家分享一下vs core运行报错遇到的一个坑。正文:...

Angular 基本常用语法

常用语法//引导 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';platformBrowserDy...

Angular项目导入到本地运行报错

前 言:hello,大家好 我是你们熟悉的小付,就在咋天那个风高秋月的夜晚我又遭遇了项目的报错,看起来原因很简单以为只是简...
这一世以无限游戏为使命!
排名
2
文章
621
粉丝
44
评论
93
docker中Sware集群与service
尘叶心繁 : 想学呀!我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好,这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术