关于angular2里面使用了templateUrl的时候设置moduleId其实是用于解析样式表和模板的相对路径,如文档中所述。
包含组件的模块的模块标识。需要能够解析模板和样式的相对网址。在Dart中,这可以自动确定,不需要设置。在CommonJS中,这总是可以设置为module.id。
ref(old):https : //angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html
我们可以通过设置@Component元数据的moduleId属性来指定模板和样式文件相对于组件类文件的位置
ref:https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
文件夹结构示例:
RootFolder
├── index.html
├── config.js
├── app
│ ├── components
│ │ ├── my.component.ts
│ │ ├── my.component.css
│ │ ├── my.component.html
没有module.id:
@Component({
selector: 'my-component',
templateUrl: 'app/components/my.component.html', <- Starts from base path
styleUrls: ['app/components/my.component.css'] <- Starts from base path
})
使用module.id:
tsconfig.json:
{
"compilerOptions": {
"module": "commonjs", <- need to change this if you want to use module.id property
...
@Component({
moduleId: module.id,
selector: 'my-component',
templateUrl: 'my.component.html', <- relative to the components current path
styleUrls: ['my.component.css'] <- relative to the components current path
})
2.angular2路由里面重定向里面关于pathMatch的说明
它能做什么
表示路由器配置。
接口概述
interface Routes {
}
接口说明
Routes是路由配置数组。每个都有以下属性:
path是使用路由匹配器DSL的字符串。pathMatch是指定匹配策略的字符串。matcher定义了路径匹配并取代自定义策略path和pathMatch。有关详细信息,请参阅UrlMatcher。component是组件类型。redirectTo是将替换当前匹配段的url片段。outlet是组件应放入的插座的名称。canActivate是用于查找CanActivate处理程序的DI令牌数组。查看CanActivate更多信息。canActivateChild是用于查找CanActivateChild处理程序的DI令牌数组。查看CanActivateChild更多信息。canDeactivate是用于查找CanDeactivate处理程序的DI令牌数组。查看CanDeactivate更多信息。canLoad是用于查找CanDeactivate处理程序的DI令牌数组。查看CanLoad更多信息。data是提供给组件via的附加数据ActivatedRoute。resolve是用于查找数据解析器的DI令牌的映射。查看Resolve更多信息。children是子路由定义的数组。loadChildren是对延迟加载子路由的引用。查看LoadChildren更多信息。
简单配置
[{path: 'team/:id',component: Team,children: [{path: 'user/:name',component: User}]}]
导航到/team/11/user/bob时,路由器将创建带有用户组件的团队组件。
多个出口
[{path: 'team/:id',component: Team}, {path: 'chat/:user',component: Chatoutlet: 'aux'}]
导航到/team/11(aux:chat/jim)时,路由器将在聊天组件旁边创建团队组件。聊天组件将被放入辅助插座。
通配符
[{path: '**',component: Sink}]
不管你导航到哪里,路由器将实例化宿组件。
重定向
[{path: 'team/:id',component: Team,children: [{path: 'legacy/user/:name',redirectTo: 'user/:name'}, {path: 'user/:name',component: User}]}]
当导航到'/ team / 11 / legacy / user / jim'时,路由器会将url更改为/ team / 11 / user / jim,然后实例化带有用户组件的team组件。
如果redirectTo值以'/'开头,那么它是绝对重定向。例如,如果在上面的示例中我们更改redirectTo为/user/:name,结果url将是'/ user / jim'。
空的路径
空路径路由配置可用于实例化不消费任何url段的组件。让我们看看下面的配置:
[{path: 'team/:id',component: Team,children: [{path: '',component: AllUsers}, {path: 'user/:name',component: User}]}]
当导航到/team/11,路由器将实例化AllUsers组件。
空路径路由可以有子路由。
[{path: 'team/:id',component: Team,children: [{path: '',component: WrapperCmp,children: [{path: 'user/:name',component: User}]}]}]
当导航到/team/11/user/jim,路由器将实例化包装器组件与其中的用户组件。
空路径路由继承其父级的参数和数据。这是因为它不能有自己的参数,因此,它经常使用其父的参数和数据作为自己的。
匹配策略
默认情况下,路由器将查看url中剩下的内容,并检查它是否以指定的路径/team/11/user开始(例如,以team/:id)开头。
我们可以更改匹配策略,以确保路径涵盖整个未消费的网址,这是类似于unconsumedUrl === path或$正则表达式。
这在重定向空路径路由时尤其重要。
[{path: '',pathMatch: 'prefix', //defaultredirectTo: 'main'}, {path: 'main',component: Main}]
由于空路径是任何url的前缀,即使导航到“/ main”,路由器仍将应用重定向。
如果pathMatch: full提供,路由器将应用重定向,当且仅当导航到“/”。
[{path: '',pathMatch: 'full',redirectTo: 'main'}, {path: 'main',component: Main}]
无组件路由
有时有必要具有在兄弟组件之间共享参数的能力。
假设我们有两个组件 - ChildCmp和AuxCmp - 我们想要放在彼此旁边,并且两个组件都需要一些id参数。
一种方法是要有一个假的父组件,所以两个兄弟都可以从它的id参数。这不是理想的。相反,您可以使用无组件路由。
[{path: 'parent/:id',children: [{ path: 'a', component: MainChild },{ path: 'b', component: AuxChild, outlet: 'aux' }]}]
所以当导航到parent/10/(a//aux:b),路由将实例化彼此相邻的主要子组件和辅助子组件。在此示例中,应用程序组件必须定义主接口和辅助插口。
路由器也将合并params,data以及resolve在componentless家长进入params,data和resolve孩子们。这是因为没有可以注入无组件父进程的激活路由的组件。
这在子组件定义如下时尤其有用:
[{path: 'parent/:id',children: [{ path: '', component: MainChild },{ path: '', component: AuxChild, outlet: 'aux' }]}]
使用此配置,导航到“/ parent / 10”将创建主要的子组件和辅助组件。
懒惰加载
延迟加载通过将应用程序加载时间拆分成多个捆绑包,并根据需要加载它们来加速我们的应用程序加载时间。路由器设计使懒惰加载简单和容易。而不是提供children属性,您可以提供loadChildren属性,如下所示:
[{path: 'team/:id',component: Team,loadChildren: 'team'}]
路由器将使用注册的NgModuleFactoryLoader来获取与“team”相关联的NgModule。然后它将提取在该NgModule中定义的路由集,并将透明地将这些路由添加到主配置。
