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

压缩打包

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

打包遇见的问题：

超过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;....<ng-container *ngTemplateOutlet="checkChild"></ng-container>

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

ts：

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

html:

  <iframe [src]="url" frameborder="0"></iframe>

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

   <img  src="/256.jpg" onError="this.src='http://photocdn.sohu.com/20120128/Img333056814.jpg';"alt="..." />

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

 <div [innerHtml]="content"></div>.....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\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, '').replace(/https/g, 'http');this.content= this.sanitizer.bypassSecurityTrustHtml(html);}, (err) => { console.log(err); });}

父组件获取子组件@ViewChild

ViewChild获取dom节点1、模板中给dom起一个名字<div #myBox>我是一个dom节点</div>2、在业务逻辑里面引入ViewChildimport { Component, OnInit,ViewChild} from '@angular/core';3、 写在类里面    @ViewChild('myBox') myBox:any;4、ngAfterViewInit生命周期函数里面获取domthis.myBox.nativeElement

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

子组件获取父组件@Input

angular7 + ng-zorro-antd 开发问题小记相关推荐

angular7中引用ng zorro antd的三种方式
在新版本的angular中使用新的ng zorro,按照官方文档一步一步来,没有报错,但是也没有反应. 试了一下官方的两种方式,第一种方式如果使用cnpm会报错,第二种方式会没有反应,也是因为使用了c ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
云音乐小程序开发知识小记（上）
云音乐小程序开发知识小记(上) 在云音乐小程序开发中学到的分上中下,因为本人也是在学习中,请多指教本次的**云音乐小程序开发知识小记(上)**主要涉及四个方面: 轮播图数字格式化处理自定义组件 ...
angular ng zorro框架日期框无法自适应宽度的解决方法
如果我们使用ng zorro框架的日期框时,就会发现,日期框的宽度总是固定的,无法像输入框一样自适应父节点<nz-form-control [nzSpan]="12"> ...
NG ZORRO知识点总结
NG ZORRO的常用属性,包括但不限于,结合代码 <button nz-button [nzType]="'primary'" [nzSize]="'large' ...
Ng Zorro配置
Ng Zorro配置文章目录 Ng Zorro配置一.app.module里配置二.引入样式 1.使用全部组件样式 2.引入组件模块全局安装:npm i ng-zorro-antd g --s ...
ngzorro html源码,angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入. 编辑layout模块中的header组件在layout.module.ts ...
PHP用oop写网站,收藏一个php的OOP开发使用小记
utf-8 可变长度 GBK 2个字节 .定义类: 1.使用class关键字 + 类名 2.类名的命名规则:A.首字母大写:B.采用驼峰规则:C.不要使用下划线. 3.类中{}之间不要出现. 1. ...
ubuntu下部署eclipse集成hadoop\android\web\GCC开发环境小记
Hadoop环境: 1.部署: 1)ubuntu上创建新用户账号:hadoop/123,并设置为管理员: 2)ubuntu上安装SSH:创建rsa无密码ssh-key: 3)ubun ...

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

压缩打包

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

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

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

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

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

父组件获取子组件@ViewChild

子组件获取父组件@Input

angular7 + ng-zorro-antd 开发问题小记相关推荐

最新文章

热门文章