好资源导航 » 文章资讯 » 浅谈Angular7 项目开发总结

浅谈Angular7 项目开发总结

2023-09-02 17:48:04 62

由于公司需要，开始学习angular，这个传闻中学习曲线及其陡峭的前端框架，并开始写第一个用angular的项目，截止今天初步完成现有需求，顾在此做一次遇到问题的总结，以便知识的掌握。

一、在angular项目中，如何使用锚点

在常规项目中，使用锚点用来做"智能"定位效果时，只需这么写：

走你
被定位区域

但是在ng中，a标签中的href属性会自动的使用路由机制，最后的结果会被当成跳转的路由地址，具体的原因有待进一步考证，反正最后的结果就是上面的写法不生效，生效写法：

来吧
被定位区域

二、组件中修改第三方UI库样式

之前中vue写项目的时候，会遇到组件风格与第三方UI库冲突的现象，用过vue的同学都了解，在vue中有个scoped这个作用域的概念，如果要自定义与UI库冲突的地方有以下几种方式：

在App.vue文件中声名样式；
在子组件中添加多个style标签；
使用深度作用选择器——'>>>';
- scss：.a/deep/.b{...}
- stylus:.a<<<.b{...}

那么在ng中个什么情况呢？首先需要了解ng渲染组件的机制，在ng中有一个东东叫showDOM；

解决方法:

在组件的.ts文件中

import{ViewEncapsulation}from'@angular/core';

@Commpoent({
...
encapsulation:ViewEncapsulation.None
})

如果这样还是覆盖不了，那就查查类名拼写啊、层级嵌套啊、和类名的位置，我曾经就是因为把类名加的位置不对导致样式不生效的，大家不要学我哟！

三、元素上添加自定义属性

vue写法

{{item.title}}

ng写法

四、不使用npm引入第三方插件的用法之一

很多时候，我们需要用的某个插件可能在npm上没有，或者由于各种版本问题，导致使用的时候会有乱七八糟的bug，找原因，去解决，费时费力；

用了ng才能明白，以前用vue的时候是多么的幸福，使用vue常规业务在国内基本都是即搜即用，ng就。。。嗯，学英语ing~。
解决方案:

将如要用到的插件放入assets文件夹中；
在根目录下的index.html中script引入；
在应用的组件中使用(windowasany).**;

ps:angular.json等其他方式也是可以的的，看各自实际情况而定；

五、监听滚动事件

使用Hostlistener`

@HostListener('window:scroll',['$event'])
publiconScroll=()=>{
dosomething
}

使用fromEvent

import{fromEvent}from'rxjs'
import{debounceTime}from'rxjs/operators'
exportclassTest{
subscribeSoll;
this.subscribeScoll=fromEvent(window,'scroll')
.pipe(debounceTime(1000))
.subscribe((event)=>{
console.log(event);
})
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

浅谈Angular7 项目开发总结

热门推荐

随机推荐