angular的基本使用

景孟勋 發表於 2019-11-4 16:56:00

1、在组件中的component.ts文件中可以直接定义属性和它的值，在前端html页面中，通过{{title}}的方式来引用
public title: any = 'username' // any 表示可以为任何类型的值  如果为其他的比如string/boolean则代表只能为这种类型值   
定义属性的三种方式  1、public：公有属性，可以在类里面使用，也可以在外面使用   //前面什么都不写则默认为public
                                   2、protected：保护类型，只有在当前类和它的子类中才可以访问
　　　　　　　　　　3、private：私有属性，只有在当前类中才可以使用
在构造函数中，如果需要改变或者引用该数据时，通过this.title即可获取
2、当需要给某个标签的属性赋值为定义的属性的值，通过[属性名]=属性值的方式来   vue则为 :属性名=属性值
 
<pre> <h3 [属性名]="title">angular定义属性名</h3></pre>
 
3、解析html代码
　　<div ="content"></div>   vue则为v-html=""
4、for循环    vue循环-v-for
<div class="cnblogs_code">
<pre><ul>
<li *ngFor="let item of list;let key = index"> // key为索引
{{item}} ---{{key}}
</li>
</ul></pre>
</div>
5、引入静态资源中的图片
　　<img  src="assets/imgurl" />既可获取
6、*ngIf 等同与v-if   if条件判断      angular没有else
7、switch的使用
<div class="cnblogs_code">
<pre>
收获1
收获2
收获3
收获4
</pre>
</div>
8、动态定义class
<div class="cnblogs_code">
<pre>="{'red':true,'blue':false}">1111111111
="{'red':false,'blue':true}">1111111111</pre>
</div>
9、动态定义style
<div class="cnblogs_code">
<pre>="{'color':'yellow'}">3333333</pre>
</div>
10、方法的调用
<div class="cnblogs_code">
<pre><button (click)="run()">点击执行事件</button>将方法定义在ts文件中，即可直接调用</pre>
</div>
11、获取DOM节点并操作它的方式
<div class="cnblogs_code">
<pre>// 监听事件的地方
<div (click)="getDom($event)">
66666666666666
</div>

// 执行事件的地方，
 getDom(e) {
const dom = e.target;
dom.style.color = 'red';
}</pre>
</div>
12、MVVM双向数据绑定（只针对表单）  首先需要在该文件下引入FormModule，并且在import中声明一次。
<img src="https://img2018.cnblogs.com/i-beta/1631381/201911/1631381-20191104165325309-399378360.png">
 
 
<div class="cnblogs_code">
<pre><input type="text" [(ngModel)]="keywords"> 此时即可实现双向数据绑定
{{keywords}}</pre>
</div>
 
 
 
 
 
 
 
 
  
来源：https://www.cnblogs.com/cazj/p/11792999.html

頁: [1]

琼殿技术论坛's Archiver

angular的基本使用