生命周期的顺序,见下图:
ngAfterContentInit:当把内容投影进组件之后调用,第一次调用ngDocheck()之后调用,只调用一次,只适用于组件
ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用,只适用于组件
ngAfterViewInit:在angular初始化组件及其子组件的视图之后调用,只调用一次,只适用于组件
ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用,只适用于组件
详细案例分析见:https://blog.csdn.net/it_rod/article/details/79433887
组件:用于构建UI组件,继承于Directive类
属性指令:用于改变组件的外观或行为
结构指令:用于动态添加或删除DOM元素来改变DOM布局
自定义指令
//子组件中使用事件发射器
@output() somethingChanged = new EventEmitter();
somethingChanged.emit(value);
像p标签或者h1标签,在标记之间可以添加内容,eg: <p>this is a paragraph</p>.那我们如果想在angular的标签之间添加内容呢,例如在<app-test></app-test>,这种情况下就可以使用<ng-content>tag directive is used</ng-content>
当我们想路由到一个组件的时候使用router.navigate this.router.navigate(['./component name'])
ViewEncapsulation 决定组件中定义的样式是否会影响整个应用程序。在Angular中有三种方法可以做到这一点: Emulated : 样式从其他HTML传播到组件。 Native : 来自其他HTML的样式不会传播到组件。 None:组件中定义的样式对所有组件都是可见的。
<router-outlet></router-outlet> 简单理解:页面占位符,决定component显示在哪里,最终会被相应的component的view替换掉
与HTML标签一起使用,eg: <h1>{ {var}}</h1> var 是来自于ts(component)中的值。
在传统的web技术中,客户端请求一个web页面(HTML/JSP/asp),服务器返回资源(或HTML页面),客户端再次请求另一个页面,服务器用另一个资源响应。问题就在于请求/响应中消耗了大量时间,或者是重新加载使用了大量时间。而在SPA技术中,即使URL不断变化,我们也只维护一个页面(index.HTML)。
Promise是eager的,意思是一旦创建,就会执行
Promise只处理一个事件
Promise不可取消
当observable或promise返回data时,我们使用一个临时属性来保存内容。稍后,我们将相同的内容绑定到模板。通过使用AsyncPipe, promise或observable可以直接在模板中使用,而不需要临时属性。
— 大概的开发流程: – 使用Typescript开发 – 使用tsc编译 – 打包、压缩、部署 部署好之后,用户在浏览器端: – 浏览器下载js代码 – angular启动,在浏览器中开始JIT的编译过程 – 渲染页面
— 流程: – typescript开发angular应用 – 用ngc编译 用angular编译器对模板进行编译,生成typescript代码 typescript编译车JavaScript – 打包部署 用户端 – 下载代码 – 启动angular – 页面渲染 AOT优势 1、渲染得更快 2、需要的异步请求更少 3、需要下载的Angular框架体积更小 4、提早检测模板错误 5、更安全 JIT优势 编译时间短,除非确实有动态组件的需求,否则jit唯一的优势就是能用来做在线 Demo和开发调试。
它是一个帮助我们维护应用程序状态的库。简单的数据流应用程序不需要Redux,它用于具有复杂数据流的单页应用程序。
此功能用于更改模板上的输出;比如将字符串更改为大写并在模板上显示它。它还可以相应地更改日期格式。
在组件的constructor中引入 ElementRef 来操作DOM元素 constructor(myElement: ElementRef) { ... }
angular路由器使用base href 作为组件、模板的基地址,开发期间,通常会在index.html所在目录中启动服务器,所以这个目录就是根目录,所以可以在index.html 的顶部添加<base href=”/”>。 当没有配置base标签时,加载应用会失败。
– 特征: — 是一个函数 — 接受一个Observer对象(包含next、error、complete方法的对象)作为参数 — 返回 unsubscribe 函数,用于取消订阅 – 作用: — 作为生产者和观察者之间的桥梁,并返回一种方法来解除生产者和观察者之间的关系,其中观察者用于处理时间 序列上的数据流。
观察者用来接收可观察者发送过来的消息 var observer = { next : x => console.log('Observer got a next value' + x), error : err => console.error('Observer got a error:' + err), complete: () => console.log('Observer got a complete notification') } 使用 observable.subscribe(observer);
在ES6中 constructor表示构造函数,使用在class中。来初始化操作。当类被初始化之后,构造函数会被调用
ngOnInit 是angular中OnInit钩子的实现,用来初始化组件。 ngOnInit : 在angular 第一次显示数据绑定和设置指令、组件的输入属性之后,初始化指令、组件 所以从angular的生命周期看,constructor是执行在先的 所以既然ngOnchanges是输入属性发生变化的时候调用,并且ngOnInit是在ngOnchanges执行之后才调用,而constructor是在组件实例化的时候就调用了,也就是说,在constructor中是取不到输入属性的值的。
参考:https://www.jianshu.com/p/af1d8f597b29
默认情况下,在初始化的时候所有路由都会加载,导致加载缓慢,启动速度慢,所以可以使用懒加载 懒加载 : 通俗 的讲就是进入主模块之后,子模块不加载,等真正访问到子模块之后,再去加载。使用loadChildren配置路由 知识点:
const routes: Routes = [ {path:'',redirectTo:'child'}, {path:'child',loadChildren:'./children-load/children-load.module#ChildrenLoadModule'}, {path:'childNew',loadChildren:'./children-newload/children-newload.module#ChildrenNewloadModule'} ];
1)考虑AOT编译。 2)确保应用程序已经经过了捆绑,uglify和tree shaking。 3)确保应用程序不存在不必要的import语句。 4)确保应用中已经移除了不使用的第三方库。 5)所有dependencies 和dev-dependencies都是明确分离的。 6)如果应用程序较大时,我会考虑延迟加载而不是完全捆绑的应用程序。
1、模块(Modules) 2、组件(Components) 3、模版(Templates) 4、元数据(Metadata) 5、数据绑定(Data Binding) 6、指令(Directives) 7、服务(Services) 8、依赖注入(Dependency Injection) 9、路由(routing)
Currency. Date. Filter. Json. limitTo lowercase number orderBy
Dirty check是比较新的数据跟老的数据的差别,如果看到有改变, 就用新的数据更新现有的视图。
Template-Driven Forms (模板驱动表单) 的特点
Reactive Forms (响应式表单) 的特点
相同点
不同点
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/180881.html原文链接:https://javaforall.cn