zoukankan      html  css  js  c++  java
  • [Angular 2] Router basic and Router Params

    • When we define router in Angualr 2, we use @RouteConcfig()
    • When we want to display component, we use <router-outlet>
    • When we want to navigate to component, we use [routerLink]="['routerName']"
    • When we want to access router params, we use RouterParams
    • When we want to access Rotuer itself, we use Router

    1. In index.html:

    <base href="/">

    2. Include router file:

    import 'angular2/router';

    3. Inject the provider:

    bootstrap(App, [
        ROUTER_PROVIDERS
    ]);

    4. @RouterConfig:

    @RouteConfig([
        {path: '/home', name: 'Home', component: HomeComponent, useAsDefault: true},
        {path: '/about', name: 'About', component: AboutComponent}
    ])

    5. Inject ROUTER_DIRECTIVES:

    directives: [HomeComponent, AboutComponent, ROUTER_DIRECTIVES],

    6. Define the link:

            <a href="" [routerLink]="['Home']">Home</a>
            <a href="" [routerLink]="['Home', {username: 'Hero'}]">Owner</a>
            <a href="" [routerLink]="['About']">About</a>

    7. Define the router-outlet:

            <nav>
                <a href="" [routerLink]="['Home']">Home</a>
                <a href="" [routerLink]="['Home', {username: 'Zhentian Wan'}]">Owner</a>
                <a href="" [routerLink]="['About']">About</a>
            </nav>
            <router-outlet></router-outlet>

    8. If deal with RouterParams:

        constructor(private _routeParams: RouteParams){
            this.username = _routeParams.get('username');
        }

    ----------------

  • 相关阅读:
    Java面试:用set集合的时候,重写过hashcode()和equal()方法吗?有什么作用?
    Bootstrap起步
    Java NIO
    Dobbo和SpringCloud区别
    Java虚拟机类加载机制和双亲委派模型
    继承和组合的特点和区别
    LinkedList和ArrayList底层原理
    聚集索引和非聚集索引
    Stream和迭代器的区别
    悲观锁和乐观锁
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5403042.html
Copyright © 2011-2022 走看看