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和我正在看的文字说:
代码示例: 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. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |