一 Angular

1简介

Angular是一款前端框架，但在使用Typescript作为开发语言的同时，也引入了面向对象的开发方式。
最初代的angular是AngularJS1.x 。后来Google团队把Angular2全部用TypeScript作为官方开发语言。Ts在JavaScript语言上添加了可选的静态类型和基于类的面向对象编程，同时支持诸多接口，命名空间，装饰器等特性。是JS的超集。当然在angular的升级过程中Google也用过Dart，AtScript语言感兴趣的同学可以自行研究一下。

2核心概念

指令是极其重要的概念，组件其实是指令的一种类型，以组件为基础的架构模型是Web前端开发的主流形式。

二 组件和模块

创建组件 模块

（终于到了这篇blog的标题）以下我说的组件和模块都是子组件和子模块。当然付组件的生成指令是一样的。
！ 你们现在听我说！ 记住这两个指令的先后顺序，先生成module 再生成component 这样你的component就会自动import进module了，如果你先生成component再生成module，那你的component会被import到根AppModule里面。所以看你需求自己搞。

ng generate module xx
//简略指令如下
ng g m xxx// terminate输入命令 生成组件
ng geneate component xxx
//简略指令如下
ng g c xxx

看下命令行的操作和生成的module模块

web\src\app\vendor\components>ng g c examplecreate src/app/vendor/components/example/example.component.html (26 bytes)create src/app/vendor/components/example/example.component.spec.ts (635 bytes)create src/app/vendor/components/example/example.component.ts (273 bytes)create src/app/vendor/components/example/example.component.css (0 bytes)update src/app/app.module.ts (2833 bytes)

看下命令行的操作和生成的component组件

-web\src\app\vendor\components>ng g c examplecreate src/app/vendor/components/example/example.component.html (26 bytes)create src/app/vendor/components/example/example.component.spec.ts (635 bytes)create src/app/vendor/components/example/example.component.ts (273 bytes)create src/app/vendor/components/example/example.component.css (0 bytes)update src/app/app.module.ts (2833 bytes)

代码分析

//example.component.ts
import { Component, OnInit } from '@angular/core';@Component({selector: 'app-example', templateUrl: './example.component.html',styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {constructor() { }ngOnInit() {}}

selector就是你在其他component调用他的时候他的名字

装饰器：
代码里面有很多@xxx
这就是装饰器：
装饰器会给函数/类套上一帽子
在python里面比如你有一个装饰器A，你有个函数B，当你执行B的时候 会先运行这个装饰器 。

在typescript里要注意区分装饰器和注解
装饰器提供了对类的属性、方法、入参修改的能力，但是单独靠装饰器是不够的，还要通过注解配合，这样才能动态的修改原来的表现行为。因此我们可以封装一些常用的装饰器方法，达到复用的能力。但要切记，装饰器的行为是发生在编译时。

angular 数据绑定
Angular数据绑定主要内容在于方括号[ ]，和圆括号（）还有花括号｛｝的使用

方括号[ ]
属性名加上方括号后，右侧赋值为表达式的值

如果属性没有方括号，右侧赋值为字符串

<div class="red">red</div>    //这里类名为red
<div [class]="red">red</div>  //这里类名为blue,就是说有方括号右侧//组件中
red: string = "blue";

圆括号( )
圆括号用于事件绑定，就是触发元素上的事件，绑定的方法就会响应，如

<div (click)="go()">gogo</div>   //圆括号里面放事件//组件类
go() {//表达式...
}

花括号{{ }}
使用花括号{{表达式}}这种方法称之为插值，可以放在模板中，注意里面的表达式不能用于赋值、运算等操作，用于显示一些值还是可以的。

<div>{{good}}</div>   //<div>你好</div> 
//组件类
good: string = "你好";

子父组件的通信和使用

实际操作 angular @output EventEmitter
现在比如我们有一个父组件，要用我们之前创建出来的子组件.

angular提供了EventEmitter用来触发自定义事件。子指令创建一个 EventEmitter 实例，并将其作为输出属性导出。子指令调用已创建的 EventEmitter 实例中的 emit(payload)方法来触发一个事件，父指令通过事件绑定(eventName)的方式监听该事件，并通过 $event 对象来获取payload对象。

父组件：

//parent.component.ts
import { Component, Input } from '@angular/core'@Component({selector: 'parent',templateUrl: './parent.component.html'
})export class ParentComponent {getChildData(data){console.log("监听到子事件发生");console.log('childData传进来了', data)}
}

//parent.component.html<div><child (putChildData)="getChildData($event)"></child></div//分析一下： putChildData是子组件里面的ouput定义的输出， getChildData是父组件里面的函数，emit过来的东西就会作为event传进getChildData 

子组件：

//child.component.ts
import { Component, Input } from '@angular/core';@Component({selector: 'child',templateUrl: './child.component.html'
})export class ChildComponent {childData={childString: 'output'}@Output() putChildData: <EventEmitter>any = new EventEmitter<any>();ngOnInit(){this.putChildData.emit(this.childData);}
}

子组件里面 @Output() 装饰器后面你可能会看到两重表达

 @Output() putChildData: <EventEmitter>any = new EventEmitter<any>();

冒号前面是方法名字，后面是他的属性
就像我们写 String xxx 一样

 @Output() putChildData = new EventEmitter<any>();

这两个都可以

Output 装饰器支持一个可选的参数，用来指定组件绑定属性的名称。如果没有指定，则默认使用 @Output 装饰器，装饰的属性名。

然后子组件也可以有html 当子组件被使用时他的html就会显示
比如

//child.component.html
<p>example works!
</p>

现在在父组件的html上面就可以看到你的子组件的html了

然后console会看到你父组件的里面写的两个log

主流的子父组件传递参数和方法 有四种

• @input
• @output
• 父组件通过局部变量获取子组件的引用 ，主动获取子组件的数据和方法
  - @viewChild
  看我另一个blog
  https://blog.csdn.net/weixin_41147129/article/details/105581454

想对比下这几种方法 可以看下这两个链接，写了几种数据传输方法。
https://segmentfault.com/a/1190000007890167
https://blog.csdn.net/chelen_jak/article/details/83055363
讲的还算详细

三 一些报错：

1
RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.
Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.
这个错误是因为 module被import了两次
在lazy-loaded(懒加载) module里面 imported 了 root AppModule ，然后有一个module你已经在root AppModule里面import过了 ，你又在lazy-loaded module里面又import了一次，这样你就套娃引用一次，又自己引用一次，一共引用两次

2
“X” is not a known element
If ‘app-x’ is an Angular component, then verify that it is part of this module.
2. If ‘app-x’ is a Web Component then add …
这个报错是因为你的子module里面没有import这个component
或者你的父module里面没有import 子module

//example.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example.component';@NgModule({imports: [CommonModule],exports: [ExampleComponent],declarations: [ExampleComponent]
})
export class ExampleModule { }

这个错看了我上面的记住先generate module再generate component 就完全不会出现

然后父module里面import子module你要自己写一下

import {ChildTestModule} from "../../vendor/components/child-test/child-test.module";@NgModule({imports: [ChildTestModule],