标签: angular2-routing
单击任何[routerLink]时的Angular 2事件
我有一个简单的Loader服务,它隐藏并显示某些加载器.我正在研究一些将用于慢速连接的东西,我需要在路由更改之间显示/隐藏加载器.
我可以在加载新路由时隐藏加载程序.
this._Router.subscribe(() => {
this._LoaderService.hide();
})
我试图找到一种方法,this._LoaderService.show()当点击任何[routerLink]时,我可以立即调用我的函数(在路由更改的开始,而不是结束).
我看了一下,我试过https://angular.io/docs/ts/latest/api/router/Router-class.html,但我似乎无法弄明白.
任何帮助赞赏
推荐指数
解决办法
查看次数
Angular2将纯文本转换为url的方式(锚链接)
我有时会有一个可以接收这样的文本的组件:
文本www.website.com
但是如果它是一个链接我想将它转换为url.像这样.
typescript angular2-directives angular2-template angular2-routing angular
推荐指数
解决办法
查看次数
当相同的url加载不同的参数时,Angular2路由器2.0.0不重新加载组件？
我在.routing.ts文件中有这个
export const routing = RouterModule.forChild([
{
path: 'page/:id',
component: PageComponent
}]);
我的PageComponent文件检查id参数并相应地加载数据.在以前版本的路由器中,如果我从/ page/4转到/ page/25,页面将"重新加载"并且组件将更新.
现在,当我尝试导航到/ page/X,其中X是id时,它只会在第一次加载,然后url会更改,但组件不会再次"重新加载".
是否需要传递一些东西来强制我的组件重新加载,并调用ngOnInit事件？
推荐指数
解决办法
查看次数
错误:(SystemJS)无法解析ActivatedRoute的所有参数:(？,？,？,？,？,？,？,？)
我正在尝试将ActivatedRoute组件注入到我的组件中以访问我正在编辑的对象的ID(或者找出,没有ID参数,创建了新对象).
我只为组件创建了模板,当我加载起始页面时(不是带有我想要使用的组件的页面的事件),我收到以下错误:
错误:(SystemJS)无法解析ActivatedRoute的所有参数:(？,？,？,？,？,？,？,？).
这是我的代码:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute} from "@angular/router";
@Component({
selector: 'my-edit',
templateUrl: './templates/my-edit.htm',
providers: [ActivatedRoute]
})
export class MyEditComponent implements OnInit {
constructor(private route : ActivatedRoute){
console.log(route.params)
}
ngOnInit() : void {
}
}
它基于来自AngularJS网站(英雄)的示例中的代码,我真的不知道这里的问题...我不能将ActivatedRoute导入Component,或者我需要一些额外的东西才能导入它？
我的路由配置是:
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
routes路径集合在哪里,就像在角度示例中一样,并AppRoutingModule在app.module中导入.
推荐指数
解决办法
查看次数
在Angular 2应用程序中为所有路径使用基准防护
canActivate在Angular2中配置路由时有没有办法设置"基础" ？因此,所有路由都由相同的基本检查覆盖,然后每个路由可以进行更细化的检查.
我有这样的AppModule路由:
@NgModule({
imports: [
RouterModule.forRoot([
{
path: '',
component: HomeComponent,
canActivate: [AuthenticationGuardService],
data: { roles: [Roles.User] }
}
])
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
对于功能模块FeatureModule:
@NgModule({
imports: [
RouterModule.forChild([
{
path: "feature",
component: FeatureComponent,
// I'd like to avoid having to do this:
canActivate: [AuthenticationGuardService],
data: { roles: [Roles.User] }
}
])
],
exports: [
RouterModule
]
})
export class FeatureRoutingModule { }
我AuthenticationGuardService通过使用中提供的角色检查用户是否可以访问路由data …
推荐指数
解决办法
查看次数
Angular 2确切的RouterLinkActive包括片段？
当使用CSS routerLink并将routerLinkActiveCSS应用于导航栏时,我还想包含这些fragment信息,以便链接对于主页中的部分是唯一的.
我已经尝试过[routerLinkActiveOptions]="{ exact: true }"运气了.
导航条形码的相关部分是:
<li routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">
<a routerLink="/sitio" fragment="inicio">Inicio</a>
</li>
<li routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">
<a routerLink="/sitio" fragment="invierte">Invierte</a>
</li>
<li routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">
<a routerLink="/sitio" fragment="contacto">Contacto</a>
</li>
上述代码访问的三个不同的URL是:
/sitio#inicio/sitio#invierte/sitio#contacto
但是当点击其中任何一个时,所有这些都被标记为活动(因为它们对应于routerLink="/sitio"并且fragment=*信息不包括在检查中.这导致导航栏在单击其中任何一个时看起来像这样:
关于如何做到这一点的任何想法？
推荐指数
解决办法
查看次数
通过routerLink定位命名插座会增加无关的"/"
我正试图通过路由在我的应用程序中启动模式.一切似乎都有效,除了向URL添加额外的斜杠以防止它解析.Url应该看起来像这样(如果我手动输入它会起作用)......
/accounts(modal:accounts/1/edit)
但我得到了这个(注意基本网址和出口目标之间的斜线)......
/accounts/(modal:accounts/1/edit)
基本标签已设置...
<head>
<meta charset="utf-8">
<title>myApp</title>
<base href="/">
...
</head>
这是我的路由配置(accounts-routing.module.ts)
const ACCOUNT_ROUTES: Routes = [
{
path: 'accounts',
component: AccountsIndexComponent
},{
path: 'accounts/new',
component: AccountsNewComponent
},{
path: 'accounts/:id',
component: AccountsShowComponent
},{
path: 'accounts/:id/edit',
component: AccountsEditComponent,
outlet: 'modal'
}
];
和插座(app.component.html)
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
和链接......
<a [routerLink]="[{ outlets: { modal: ['accounts', account.id, 'edit'] } }]">Edit</a>
我错过了什么？该项目是利用创建angular-cli@1.0.0-beta.26和angular@2.4.6和angular-router@3.4.6安装.
FWIW,这是日志的截图...
推荐指数
解决办法
查看次数
Angular 2:模块内的路由(二级嵌套路由器 - 出口)
我一直在玩这里找到的Angular 2 webpack启动器,它有很多有用的例子.不过,我遇到了路由问题.我删除了一些模块并添加了我自己的模块,其中包含子项(我仍然不确定使用子模块或子组件是否是最佳实践 - 我目前正在尝试使用组件).
我的目标是能够为正常(顶层模块之间进行切换Home,并About在这种情况下),但加载我经过Home多个子组件之间的模块,交换(或模块,如果是更好的支持)的内部Home模块的模板.
我试图用另一种<router-outlet>中Home-我试过将其命名和使用outlet在放慢参数Home模块路由定义,但点击链接内加载Home当前不工作.代码如下:
这是我目前的应用程序结构(大部分额外的webpack东西都被遗漏了):
app
|-app.component.ts (template contains router-outlet)
|-app.module.ts
|-app.routes.ts
|-about
|-about.component.ts
|-about.component.html
|-home
|-home.module.ts
|-home.component.ts
|-home.component.html (contains router outlet for children)
|-home.routes.ts
|-signup
|-signup.component.ts
|-signup.component.html
|-login
|-login.component.ts
|-login.component.html
这是我的app.component,它与它在启动器repo中的启动几乎相同 - 我刚刚添加了一个链接到我自己的模块并删除了其他模块:
app.component.ts
import {
Component,
OnInit,
ViewEncapsulation
} from '@angular/core';
@Component({
selector: 'app',
encapsulation: ViewEncapsulation.None,
styleUrls: [
'./app.component.css'
],
template: `
<nav>
<a [routerLink]=" …推荐指数
解决办法
查看次数
在Angular4之外提供静态html
我是Angular 4/Angular 2的初学者.我正在构建一个包含的应用程序
1)静态html文件(aboutus.html,pricing.html,联系us.html等),带有相应的css,js文件2)具有复杂功能的单页应用程序
第一部分#1根本不需要Angular,因为它完全是静态的.登录后,用户进入#2.从我经历的Angular教程中,似乎我需要将#1和#2组合在一起,仍然需要创建#1中的组件等,我觉得这是不必要的.
有没有办法,我可以构建这个项目,以便我可以按原样使用静态HTML,并仅将Angular用于动态单页面应用程序？任何有用的链接或示例将非常感谢.
推荐指数
解决办法
查看次数
在Angular中,我如何直接导航到延迟加载模块中的路径？
我想有两个顶级路径用于登录和注册.
我宁愿没有做auth/log-in和auth/register.
但是,auth组件位于一个单独的模块中,这很好,因为除非特别要求,否则不应加载它.
export const routes: Route[] = [
{ path: 'log-in', loadChildren: './auth-module/auth.module#AuthModule'},
{ path: 'register', loadChildren: './auth-module/auth.module#AuthModule'}
];
我如何指定何时定义我希望log-in路径转到延迟加载的AuthModule 内部路径的log-in路径,以及转到延迟加载模块内部路径的路径？registerregister
推荐指数
解决办法
查看次数
标签 统计
angular ×10
angular2-routing ×10
html ×2
javascript ×2
modal-dialog ×1
outlet ×1
router ×1
routing ×1
typescript ×1