angular7 + ng-zorro-antd 开发问题小记

压缩打包

ng build --prod --build-optimizer     // 编译后进一步压缩文件的大小

打包遇见的问题：

1. 超过budgets

WARNING in budgets, maximum exceeded for initial. Budget 2 MB was exceeded by 1.77 MB

解决：angular.json文件中的budgets的maximumWarning值

    "budgets": [{
          "type": "initial",
          "maximumWarning": "4mb",
          "maximumError": "5mb"
        }]

1、通过ip地址访问同一局域网下已经启动的angular项目

ng serve --host 192.168.1.136（ip地址）

2、子组件引用父组件的 children 属性

import { Component, OnInit, Input, ElementRef,Output,EventEmitter } from '@angular/core';
 @Input() checkChild: ElementRef;
 ....
 

3、angular 使用 iframe 路径安全问题

ts：

import { DomSanitizer } from '@angular/platform-browser'
***
constructor(
    private sanitizer: DomSanitizer,
){
this.url = this.sanitizer.bypassSecurityTrustResourceUrl('http://******');
}

html:

4、图片加载失败显示默认图片

5、使用iframe 嵌套微信文章网页

 

 .....

 import { DomSanitizer } from '@angular/platform-browser'
 private sanitizer: DomSanitizer,
 ...
  getUrl(URL) {
    //url 为微信公众号文章链接
    let http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    let realurl = http + '//cors-anywhere.herokuapp.com/' + URL;
    axios.get(realurl).then((response) => {
      console.log(response)
      let html = response.data;
      html = html.replace(/data-src/g, "src")
        .replace(/)<[^<]*)*<\/script>/g, '')
        .replace(/https/g, 'http');
      this.content= this.sanitizer.bypassSecurityTrustHtml(html);
    }, (err) => { console.log(err); });
  }

父组件获取子组件@ViewChild

ViewChild获取dom节点

    1、模板中给dom起一个名字
      


        我是一个dom节点
      

    2、在业务逻辑里面引入ViewChild

    import { Component, OnInit,ViewChild} from '@angular/core';



    3、 写在类里面    @ViewChild('myBox') myBox:any;

    4、ngAfterViewInit生命周期函数里面获取dom



    this.myBox.nativeElement

@ViewChild(‘appTable’, { static: false }) newAppTable;
appTable: 组件 （#appTable）
newAppTable：获取组件后新的组件命名

子组件获取父组件@Input