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()