angular使用记录
发布于2021-05-30 07:53 阅读(1648) 评论(0) 点赞(11) 收藏(1)
ng --version
此版本angular-cli版本是9.1.6，更新最新版本
npm uninstall -g @angular/cli // 老版本是写npm uninstall -g angular-cli
npm cache clean -f
npm install -g @angular/cli@latest
☆ 模块化：是从代码逻辑的角度进行划分；方便代码分层开发，保证每个功能模块的职能单一；
☆ 组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用
☆ Angular工程属于模块化开发的思想，angular内也有组件（component），模块（module）是最小化单元。
☆ Vue则属于组件化开发，组件化是Vue的精髓,Vue就是由一个一个的组件构成的
elementRef
定义：对视图中某个原生元素的包装器。
Angular工程访问dom节点可以使用原生方法或者安装jquery方便的进行dom操作。不过angular自身是有访问dom的api，就是elementRef。不支持直接操作dom。
import { Component, ElementRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
title = 'angular-test';
constructor(private elementRef: ElementRef) {
let targetDiv = this.elementRef;
console.log(targetDiv);
console.log(targetDiv.nativeElement.getElementsByClassName('test'));
}
}
Angular父子组件 & ng-content使用
ng-content有点类似于< router-outlet >，充当占位符的角色，不过更类似于vue的<slot></slot>，在组件间交互使用时规定内容的预期位置。
例如：
demo-one组件：
// demo-one component.ts
@Component({
selector: 'app-demo-one',
templateUrl: './demo-one.component.html',
styleUrls: ['./demo-one.component.less']
})
// demo-one html
<p>demo-one works!</p>
<p>--start--</p>
<ng-content></ng-content>
<p>--end--</p>
app.component使用demo-one组件：
<button (click)="btnClick()">按钮</button>
<app-demo-one>
<p>这是app的内容</p>
</app-demo-one>
ng-content由上述案例可知，其用于被引入的组件中，决定外部插入的内容的位置。
外部组件通过子组件的selector选择器名称引用子组件。
原文链接:https://blog.csdn.net/weixin_41993525/article/details/117370416
所属网站分类: 技术文章 > 博客
作者：听说你很拽
链接：http://www.qianduanheidong.com/blog/article/115906/97198d75cbab17f06007/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力