程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

angular使用记录

发布于2021-05-30 07:53     阅读(1561)     评论(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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

11 0
收藏该文
已收藏

评论内容:(最多支持255个字符)