11.1 angular4学习 - Githubissues

vieyahn2017 commented 4 years ago

angular4学习

vieyahn2017 commented 4 years ago

使用 ng generate 命令，为已有的 Angular 应用程序添加新的功能。

ng generate class my-new-class: 新建 class ng generate component my-new-component: 新建组件 ng generate directive my-new-directive: 新建指令 ng generate enum my-new-enum: 新建枚举 ng generate module my-new-module: 新建模块 ng generate pipe my-new-pipe: 新建管道 ng generate service my-new-service: 新建服务 ng generate 命令与其它的子命令一样，也有快捷键，具体如下：

ng g cl my-new-class: 新建 class ng g c my-new-component: 新建组件 ng g d my-new-directive: 新建指令 ng g e my-new-enum: 新建枚举 ng g m my-new-module: 新建模块 ng g p my-new-pipe: 新建管道 ng g s my-new-service: 新建服务

vieyahn2017 commented 4 years ago

npm install -g @angular/cli@latest npm install @angular/cli@1.3.2

ng generate component simple-form --inline-template --inline-style ng g c simple-form -it -is # 表示新建组件，该组件使用内联模板和内联样式

ng g c study1/greet ## component最好不要使用内联模式 ng g c study2/child

vieyahn2017 commented 4 years ago

Angular4教程 https://www.w3cschool.cn/angular/angular-ygso24om.html

vieyahn2017 commented 4 years ago

Angular4学习笔记（六）- Input和Output https://www.cnblogs.com/yw0219/p/7768960.html @Input是父组件向子组件传递数据， @Output是子组件向父组件传递数据。

Angular-使用好NgForOf的trackBy带来性能上的提升 https://blog.csdn.net/tzllxya/article/details/93508467

vieyahn2017 commented 4 years ago

angular6 @ViewChild注解学习 https://blog.csdn.net/hbiao68/article/details/86611457 搜到了代码 https://github.com/yingxs/javaEE_log/blob/c41ef86dd84cff27141946d8e116385c889c2496/angular/angulardemo01/src/app/components/news/news.component.ts

Angular 正确使用 @ViewChild、@ViewChildren 访问 DOM、组件、指令 https://www.jianshu.com/p/ac5366abfa74

@ViewChild和@ViewChildren是Angular提供给我们的装饰器，用于从模板视图中获取匹配的元素。需要注意的是@ViewChild和@ViewChildren会在父组件钩子方法ngAfterViewInit调用之前赋值。接下来我们来看下@ViewChild、@ViewChildren怎么使用。

vieyahn2017 commented 4 years ago

angular中HostListener 和 HostBinding https://blog.csdn.net/ligaoming_123/article/details/81531623

vieyahn2017 commented 4 years ago

Angular 4官方文档(一)【架构】

https://blog.csdn.net/WuLex/article/details/78631980

组件 HeroListComponent 的示例模板中有三种形式：

<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>

1）插值表达式（interpolation）：插值表达式 {{ hero.name }} 在

元素之间展示组件的 hero.name 属性值。

2）属性绑定（property binding）：属性绑定 [hero] 将父组件 HeroListComponent 的 selectedHero 的值传递给向子组件的 hero 属性。

3）事件绑定（event binding）：当用户点击一个 hero 的名字是，(click) 事件绑定调用了组件的 selectHero 方法。

双向绑定是第四种重要的绑定方法。它使用 [(ngModel)] 指令，在一个表达式中同时绑定属性和事件。

<input [(ngModel)]="hero.name">

在双向绑定中，数据的属性值像属性绑定一样，从组件流向 input 输入框。用户输入值改变，数据从 input　输入框流回到组件，将最后的值重置为组件里的属性的值，正如事件绑定一样。

每次 JavaScript 事件循环，Angular 都会处理所有的数据绑定，从应用组件的根部到所有的子组件。

我们已经学习了一个 Angular 应用的八个主要构建单元的基础知识：

Modules 模块 Components 组件 Templates 模板 Metadata 元数据 Data binding 数据绑定 Directives 指令 Services 服务 Dependency injection 依赖注入这是 Angular　应用中其他一切的基础，有了这些基础就足以继续开发。但这没有包含我们所需要知道的所有内容。

以下是其他重要的 Angular 特性和服务。大部分将涵盖在这份文档中。

Animations 动画: 不需要深入了解动画技术或者CSS，使用 Angular 动画库给组件添加动画效果。 Change detection 变化检测: 变化检测文档将会涵盖 Angular 如何决定组件属性值是否已改变，何时更新视图，如何使用zones拦截异步活动，以及运行变化检测策略的。 Events 事件: 事件文档将涵盖通过订阅和发布事件的机制，如何使用组件和服务来唤起事件。 Forms 表单: 使用基于HTML的验证和脏检查机制，支持复杂的数据输入情形。 HTTP: 通过 HTTP 客户端与服务端通讯以获取数据、保存数据以及来唤起服务端的响应。 Lifecycle hooks 生命周期钩子: 利用组件的生命周期的关键时刻，从创建到销毁，应用生命周期钩子接口。 Pipes 管道: 使用模板中的管道来改变展示的值，从而改善用户体验。比如 currency这个管道表达式： Router 路由: 在客户端应用中，从一个页面导航到另一个页面，从不离开浏览器。 Testing 测试: 使用 Angular Testing Platform，当应用的各个部分与 Angular 框架交互时，进行单元测试。

vieyahn2017 commented 4 years ago

Angular 2 组件之间如何通信？ https://blog.csdn.net/qq_15096707/article/details/52859110

angular组件之间通讯 https://blog.csdn.net/beichen3997/article/details/80997727

Angular组件之间的通信方式 https://blog.csdn.net/SilenceJude/article/details/85280506

angular2+中组件通信（组件交互）的几种方式 https://blog.csdn.net/yaomengzhi/article/details/80277702 其中：非嵌套组件之间通信：通过服务来通信基于RXJS，该方法也可用于嵌套组件之间的通信

angular2/4通过服务实现组件之间的通信EventEmitter https://segmentfault.com/a/1190000011425280

vieyahn2017 commented 4 years ago

【EventEmitter 和 RXJS 区别】

angular2 学习笔记 ( rxjs 流 ) https://www.cnblogs.com/keatkeat/p/5900998.html

前端必懂EventEmitter，不懂会丢人 https://www.jianshu.com/p/e37ca8369162/ 发布订阅模式与观察者模式

【Rxjs】 - 解析四种主题Subject https://segmentfault.com/a/1190000012669794 Subject
BehaviorSubject
ReplaySubject
AsyncSubject

vieyahn2017 commented 4 years ago