标签：sage 数据对象 指令 inpu asc 连接 通过 形式 从服务器
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()
标签：sage 数据对象 指令 inpu asc 连接 通过 形式 从服务器
原文地址：https://www.cnblogs.com/QQ-lala/p/11621499.html
