angular 基础（一）

1.全局安装 Angular CLI

npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open --port 端口号

--port 可以不加 默认4200端口

2.组件创建（通过命令）

ng generate component heroui

@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。

CLI 自动生成了三个元数据属性：

1.selector— 组件的选择器（CSS 元素选择器）

2.templateUrl— 组件模板文件的位置。

3.styleUrls— 组件私有 CSS 样式表文件的位置。

CSS 元素选择器可以模版中作为组件 <app-heroes></app-heroes> 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。

3.组件传值

父传子：

通过动态绑定一个属性用 []包裹起来 后面跟着要传的参数
子组件通过@Input() 接受(注意Input需要进行引入)

子传父：

如上图需要引入EventEmiter 和 Output然后实例化EventEmiter
然后通过事件来触发器实例化的那个对象用emit来把事件携带出去

父组件接受这个值需要自定义一个事件在conponent接受

非父子组件传值： 一般通过service来实现。这就需要涉及一个angular很重要的概念-依赖注入 一个服务（service）需要注入到app 里面的providers 依赖注入的时候，会优先检查注入的模块中有没有，然后再从根模块providers中查找

可以通过命令生成一个service:
    ng generate service hero

@injectable就是我们俗称的装饰器，他把这个类标记为依赖注入系统参与者之一。这个类也就是HeroService，这个类他会提供一个可以注入的服务，并且还可以拥有自己带注入的依赖
@Injectable() 装饰器会接受该服务的元数据对象，就像 @Component() 对组件类的作用一样。

准备注入：

这样你就可以在这个组件中调用service的方法属性等（但是注意你要调用service的属性和方法一定要是public）
Angular只会绑定到组件的公共属性

以上所谓的service只是一个小demo真正开发请求数据一定是异步获取的，所以他可以返回promise等也可以返回一个Observable(可观察对象)

Observable 是 RxJS 库中的一个关键类。

上面说到服务中也可以被注入服务

在Heroserver使用message服务的方法

4.路由

（1）在 Angular 中，最好在一个独立的顶级模块中加载和配置路由器，它专注于路由功能，然后由根模块 AppModule 导入它。

（2）按照惯例，这个模块类的名字叫做 AppRoutingModule，并且位于 src/app 下的 app-routing.module.ts 文件中。

使用CLI生成：
    ng generate module app-routing --flat --module=app
     --flat 把这个文件放进了 src/app 中，而不是单独的目录中。
     --module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

生成的文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: []
})
export class AppRoutingModule { }

但是你通常不会在路由模块中声明组件，所以可以删除 @NgModule.declarations 并删除对 CommonModule 的引用。

你将会使用 RouterModule 中的 Routes 类来配置路由器，所以还要从 @angular/router 库中导入这两个符号

添加一个 @NgModule.exports 数组，其中放上 RouterModule 。 导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。

如下

路由定义 会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。

典型的 Angular 路由（Route）有两个属性：

path：一个用于匹配浏览器地址栏中 URL 的字符串。

component：当导航到此路由时，路由器应该创建哪个组件。

如果你希望当 URL 为 localhost:4200/heroes 时，就导航到 HeroesComponent。

首先要导入 HeroesComponent，以便能在 Route 中引用它。 然后定义一个路由数组，其中的某个路由是指向这个组件的。

你必须首先初始化路由器，并让它开始监听浏览器中的地址变化。

把 RouterModule 添加到 @NgModule.imports 数组中，并用 routes 来配置它。你只要调用 imports 数组中的 RouterModule.forRoot() 函数就行了。
imports: [ RouterModule.forRoot(routes) ],
    
这个方法之所以叫 forRoot()，是因为你要在应用的顶级配置这个路由器。 forRoot() 方法会提供路由所需的服务提供商和指令，还会基于浏览器的当前 URL 执行首次导航。

路由出口 ：

<router-outlet></router-outlet>
<router-outlet> 会告诉路由器要在哪里显示路由的视图。

注意：

能在 AppComponent 中使用 RouterOutlet，是因为 AppModule 导入了 AppRoutingModule，而 AppRoutingModule 中导出了 RouterModule。

路由切换：

路由传参： 写成数组形式第一个参数是路径，后面跟的是要传的参数

路由表这么写用/：name来中转

组件接受（1）：

1先导入这三个语句

2.依赖注入

    然后把 ActivatedRoute、HeroService 和 Location 服务注入到构造函数中，将它们的值保存到私有变量里：

3.最后接受

1.这个this.snapshot.paramMap.get()是一个路由信息的抓取快照，抓取自组件刚刚创建完毕

2.还有一种形式：this.activatedRoute.snapshot.params['id']也是可以
3.this.activatedRoute.params.subscribe((params)=>{
},()=>{
    
},()=>{
    
})
第三种一般接受三个参数
注意：最后两种需要依赖注入 activatedRoute 

组件接受（2） 路由重定向：

pathMath的value值一般有两个 full和 prefix第一个指的是完全匹配，

编程式导航：

1. navigate

也需要注入依赖 activatedRoute
this.activatedRoute.navigate(['home'],queryParams:{name:'',....})

通过navifatebyurl路径跳转方式 如果传的是对象的话就可以通过Json方式转换一下

接收：

2.location 需要依赖注入localtion

      this.location.back()
      this.location.gorward()

注意：路由传参数如果一个参数就需要在路由配置表里面配置，如果是多个就不需要了