2019-10-03

Posted 2022-12-20 qq-lala

1、主组件向从组件传参数， 从组件根据传递的参数-使页面呈现不同的响应结果:

step1: 在子组件ts文件中 给属性用@Input() 符合标识此参数是从主组件传递过来的，
属于输入参数，
eg : @Input() hero: Hero; -->从主组件接收一个Hero对象的hero属性

step2: 在主组件模板中给hero属性绑定值，eg:
<app-hero-detail [hero]="selectedHero"></app-hero-detail>
[hero]="selectedHero" 是 Angular 的属性绑定语法。
这是一种单向数据绑定

注意：主组件模板中，添加的子组件选择器中绑定的hero属性名称必须存在于
子组件ts文件的类中且属性带有@input装饰器标识，
otherwise，will throw a exception as follows:
Can‘t bind to ‘hero1‘ since it isn‘t a known property of ‘子组件‘.

2、服务-Service
组件不应该直接获取和保存数据，他们不应该了解是否在展示假数据。它们应该
聚焦于展示数据，而把数据访问的职责委托于某个服务
服务是在多个互相不知道的类之间共享信息的好办法

@Injectable()装饰器会接受该服务的元数据对象

在要求angular把service注入到组件之前，你必须先把这个服务提供给依赖注入系统，
可以通过注册提供商来实现这一点

默认情况下，angular CLI命令ng generate service会通过给@Injectable装饰器添加
元数据的形式，用根注入器将你的服务注册成提供商

@Injectable(
providedIn: ‘root‘,
)
root为提供商，以便在别处可以注入它

3、向组件注入服务

step1:先导入服务

step2:constructor(private heroService: HeroService)
声明了一个私有heroService属性， 把它标记为一个HeroService的注入点
当Angular创建该组件时，依赖注入系统会把这个heroServce参数设置为Heroservice
的单例对象

step3：创建一个函数获取服务中的数据，然后在ngOnInit中调用该函数
注意：最好不要在构造函数中调用，让构造函数保持简单，只做初始化操纵：
比如把构造函数的参数赋值给属性。
构造函数不应该做任何事，它当然不应该调用某个函数向远端服务发起HTTP请求
而是选择在ngOnInit中调用

4、可观察（Observable）的数据

获取数据-真实应用都是从服务器端获取，等待响应，所以需要异步获取数据
Observble是RXJS库中的一个关键类
可以用RxJS中的of()函数来模拟从服务器返回数据， eg:

getHeroes(): Observable<Hero[]>
return of(HEROES);

调用该函数，获取结果：
this.Service.getHeroes()
.subscribe(result =>this.heroes = result);

5、constructor(public messageService: MessageService)
Angular只会绑定到组件的公共属性，所以这个messageService必须是public
html绑定语法：可以直接调用messageService中的方法
(click)="messageService.clear()"

6、若在ng new my-app命令中选择了不创建Routing模块，则用如下命令可以生成：
ng generate module app-routing --flat --module=app
--flat 把这个文件放进了src/app中，而不是单独的目录中
--moudle = app，告诉CLI把它注册到AppModule的imports数组中

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

典型的Angular路由（Route）有两个属性：
1、path:一个用于匹配浏览器地址栏中URL的字符串
2、component：当导航到此路由时，路由器应该创建哪个组件

8、RouterModule.forRoot()
你必须首先初始化路由器，并让它开始监听浏览器中的地址变化
把RouterModule添加到@NgModule.imports数组中，并用routes来配置它。你只要
调用imports数组中的RouterModule.forRoot()函数就行了。
imports: [RouterModule.forRoot(routes)]

这个方法之所以叫forRoot(),是因为你要在应用的顶级配置这个路由器，此方法会提供
路由所需的服务提供商和指令，还会基于浏览器的当前URL执行首次导航。

9、添加路由出口（RouterOutlet）
<router-outlet></router-outlet> --当连接到组件时，才显示视图

10、添加路由连接（routerLink）
<a routerLink="/heroes">Heroes</a>

11、添加默认路由
当应用启动时，浏览器的地址栏指向了网站的根路径，它没有匹配到任何现存路由，
因此路由器也不会导航到任何地方。<router-outlet>下方是空白的
path: ‘‘, redirectTo: ‘/dashboard‘, pathMatch: ‘full‘

12、ActivatedRoute --保存着到当前组件实例的路由信息。这个组件对从URL
中提取的路由参数感兴趣

location 是一个angular的服务，用来与浏览器打交道

13、javascript中，将操作数转为数字：+"90" => 90

14、回到原路
this.location.back()