• 【2019-10-03】主从组件/服务、路由 简介



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

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    Python Module_oslo.vmware_连接 vCenter
    Openstack nova-scheduler 源码分析 — Filters/Weighting
    Openstack nova-scheduler 源码分析 — Filters/Weighting
    Openstack组件实现原理 — OpenVswitch/Gre/vlan
    python接口自动化测试十:字典、字符串、json之间的简单处理
    python接口自动化测试九:重定向相关
    python接口自动化测试八:更新Cookies、session保持会话
    python接口自动化测试七:获取登录的Cookies,并关联到下一个请求
    python接口自动化测试六:时间戳,防重复处理
    python接口自动化测试五:乱码、警告、错误处理
  • 原文地址:https://www.cnblogs.com/QQ-lala/p/11621499.html
Copyright © 2020-2023  润新知