angular的语法以及知识点汇总。看完这个就能掌握基本的angular应用的使用

1、ngFor是一个“结构型指令”。
结构型指令会通过添加、删除和操纵他们的宿主元素等方式塑造或重塑DOM的结构。任何带星号*的指令都是结构型指令。

2、插值语法{{ }}
插值会把属性的值作为文本渲染出来。

3、属性绑定语法[ ]
在html中允许使用属性值

4、事件绑定
事件绑定时通过把事件名称包裹圆括号（）中完成的

5、*ngIf指令
条件成立才会操作其中的代码

6、组件：
组件就是在UI中划分了区域，一个区域就是一个组件。

7、组件的组成：
（1）一个组件类：处理数据和功能。
组件定义中的组件类，会导出一个类。类似这样的代码：

export class XxxComponent

在这个类里面编写逻辑和处理数据
（2）一个html模板：绘制UI
（3）一个样式表，如css文件

@Component()装饰器
这表明它下面的类是一个组件。它提供了有关该组件的元数据。

8、元数据：
（1）选择器：在html渲染其组件时使用的名字
（2）模板：组件的UI
（3）样式：组件的样式

9、组件之间传值（输入输出）：
使用@Input()
需要接收值的组件A：@Input()中声明一个变量a
传递值的组件B：在A的选择器中，直接以[a] = "需要传递的值"这样的格式就能传递值（类似html标签中的height = 20px)

10、@output()：
用于在A组件触发但是却在B组件中使用的方法
在A组件中编写一个按钮，在其类文件中声明：@output() ‘自定义名称a’ = new EventEmitter();
上面的代码就是让“自定义名称a”是一个“事件监听器”。
然后在A的html文件中<a (click) = "自定义名称a.emit()">TEST</a>
这时在B组件定义一个方法b，在B的html中引入A的选择器，并设置属性('自定义名称a') = "方法b"
这样你点击A的TEST按钮，执行的却是B组件的b方法。

11、路由文件的使用（import的使用）：
app.module.ts文件下：

@NgModule({
	import:[
		BrowserModule,
		FromsModule,
		RouterModule.forRoot([
			{path:'',component:ProductListComponent},
			{path:'products/:productld',component:ProductDetailsComponent},
		])
	],
})

引入三个模块BrowserModule,FromsModule,RouterModule.forRoot…

另一种同效果方式：
app.module.ts文件下：

@NgModule({
	imports:[
		BrowserModule,
		FromsModule,
		AppRoutingModule
	],
})

然后在app-routing.module.ts文件中：

const routes:Routes = [
	{path:'',component:ProductListComponent},
	{path:'products/:productld',component:ProductDetailsComponent},
];
@NgModule({
	imports:[
		RouterModule.forRoot(routes)
	],
	exports:[RouterModule]
})

这两种是同效果的，第一种是直接导入路径，第二种导入已经导入路径的模块，
其实import的东西，就相当于写进当前组件了。