加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular2 Routing:它创建一个相关组件的实例是什么意思?

发布时间:2020-12-17 17:07:43 所属栏目:安全 来源:网络整理
导读:我正在教自己Angular2和我正在看的文字说: The router locates or creates an instance of the component associated with the route,and that component’s view is displayed in the location defined by the RouterOutlet directive. 代码示例: import
我正在教自己Angular2和我正在看的文字说:

The router locates or creates an instance of the component associated with the route,and that component’s view is displayed in the location defined by the RouterOutlet directive.

代码示例:

import { Component } from 'angular2/core';
import {ProductListComponent} from './products/product-list.component';
import {ProductService} from './products/product.service';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS,RouteConfig,ROUTER_DIRECTIVES} from 'angular2/router';
import 'rxjs/Rx'; //Load all features
import {WelcomeComponent} from './home/welcome.component'
@Component({
    selector: 'pm-app',template:`
    <div>
        <nav class='navbar navbar-default'>
            <div class='container-fluid'>
                <a class='navbar-brand'>{{pageTitle}}</a>
                <ul class='nav navbar-nav'>
                    <li><a [routerLink]="['Welcome']">Home</a></li>
                    <li><a [routerLink]="['Products']">Product List</a></li>
                </ul>
            </div>
        </nav>
        <div class='container'>
            <router-outlet></router-outlet>
        </div>
    </div>`,directives: [ROUTER_DIRECTIVES],providers: [ProductService,HTTP_PROVIDERS,ROUTER_PROVIDERS]
})
@RouteConfig([
    {path: '/welcome',name: 'Welcome',component: WelcomeComponent,useAsDefault: true },{path: '/products',name: 'Products',component: ProductListComponent}
])
export class AppComponent {
    pageTitle: string = "Acme Product Management";
}

问题是:我可以看到定位部分,但它是什么意思,它创建了一个相关组件的实例?它只是{},如果是,那么在关联的RouterOutlet指令中会显示什么?

解决方法

您有RouteConfig注释,它包含两个配置对象:

{path: '/welcome',component: ProductListComponent}

例如,该对象中的每个对象都有自己的路径/ welcome和关联组件WelcomeComponent.

如果你要去/欢迎位置,与此路径组件关联的角度放置 – 欢迎组件位于< router-outlet>< / router-outlet>的地方指令包含在html中.

结果我们在某个特定的地方用自己的html和逻辑注入了Component.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读