关于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: Chat
outlet: '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', //default
redirectTo: '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中定义的路由集,并将透明地将这些路由添加到主配置。