tnblog
首页
登录

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

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

先看看代码

export class SidenavComponent implements OnInit {

  private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);

  constructor(
    private router: Router,
    zone: NgZone) {
    this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));
  }

  @ViewChild(MatDrawer) drawer: MatDrawer;

  ngOnInit() {
    this.router.events.subscribe(() => {
      if (this.isScreenSmall()) {
        this.drawer.close();
      }
    });
  }

  isScreenSmall(): boolean {
    return this.mediaMatcher.matches;
  }

}

看着没什么错

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

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

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

需改成

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

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

@ViewChild(MatDrawer) drawer: MatDrawer;

需改成

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


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

评价
有钱人的开发有着你们不懂的快乐!O(* ̄︶ ̄*)O
排名
6
文章
6
粉丝
16
评论
8
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}