我正在尝试在路由更改时获取app.component中的当前路由名称或路由路径,以便我可以将路由名称用作包装器div周围的页面类.我正试图找出解决这个问题的最佳方法.以前我订阅了路由器更改属性,就像我在下面列出的那样,但似乎不再提供@ angular/router 3.0.0-alpha.3.如果有人有任何想法或建议,我将非常感激.
this.router.changes.subscribe((val) => {
var path = this._location.path();
if (path.indexOf('page-name') !== -1) {
this.pageClass = 'page-name';
}
})
如何在没有辅助路线的情况下获取路线信息？场景是关闭辅助路线,为此我正在考虑从当前路线中删除辅助路线信息并导航到新路线,
所以我要找的是aux1-route从当前的路线上剥离.
/route1(aux1:aux1-route;id=123) -> /route1
/route1(aux1:aux1-route;id=123//aux2:aux2-route) -> /route1(aux2:aux2-route)
app.html
<router-outlet></router-outlet>
<router-outlet name='aux1'></router-outlet>
<router-outlet name='aux2'></router-outlet>
路线配置
{ path: "route1", component: route1Component }
{ path: "aux1-route", component: aux1RouteComponent, outlet: "aux1" }
{ path: "aux2-route", component: aux2RouteComponent, outlet: "aux2" }
Angular 2 version : 2.0.0-rc.5
Angular Router version : 3.0.0-rc.1
还请建议是否有其他方法可以从应用程序的任何位置关闭辅助路由.
提前致谢!!
我正在尝试创建CanDeactivate防护，以在用户离开路线时提示“保存更改”。有一些我想排除的路线（可以说，当用户切换选项卡，但不选择新项目时）。我一直在努力了解如何在不使用某种导航服务的情况下获取目标URL，而只保留完整的URL。这是我的签名，可以取消激活
// This is what handles the deactivate
public canDeactivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
所有的“ route”和“ state”对象都包含先前的URL，而没有有关目标URL的信息。
我触发另一个组件中的导航
this._router.navigate(['/clients', this.selectedClient.id, page]);
angularjs angularjs-directive angular2-template angular2-routing angular
我想要两个路由器出口，一个是主出口，另一个是模态出口。导航到时/login，我想在主要出口中显示我的home组件，在模式出口中显示我的登录组件。像这样：
{
path: 'login',
component: HomeComponent
},
{
path: 'login',
component: LoginComponent,
outlet: 'modal'
}
这可以通过使用可怕的辅助网址（例如）来实现/home(modal:login)，但是当然没有人希望其网址看起来像那样。
没有这些网址该如何解决？
我需要将数据从一个组件传递到另一个组件,我发现只有在url中使用路由参数的方法:
所以我对路由器中的目标组件进行了这样的配置:
{
path: 'edit-tags/:type/:name/:id',
component: EditTagsComponent,
},
我使用它来自另一个组件:
this.router.navigate([`../edit-tags/${product.type}/${product.name}/${product.id}`], { relativeTo: this.route });
它工作正常,但我不想id在url中显示,还需要将更多数据传递给组件.
我也见过在路由器中使用这样的配置:
{ path: 'test-product', component: ProductsContentComponent, data: { role: 'admin', type: 'test-product' } }
但我没有找到在另一个组件中使用相同方法的示例.
那么,有没有办法在路由中将一些数据从组件传递到组件而不在URL中反映它？
Routs策略:
export const routes = [
{
path : 'rto-activation/:id',
component : RtoActivationComponent,
resolve : {
'singleRto': SingleRtoResolve
},
children : [
{path: 'start', component: ActivationStartComponent},
{path: 'warning', component: WarningComponent},
{path: 'confirm', component: ConfirmRtoDetailsComponent},
{path: 'ldWaiver', component: LDWaiverComponent},
{path: 'payment-schedule', component: PaymentScheduleComponent},
{path: 'user-reference', component: ReferenceComponent}
]
}
SingleRtoResolve:
constructor(private router: Router,
private route: ActivatedRoute) {
}
resolve() {
var self = this;
return new Promise((resolve, reject) => {
self.subscription = self.route.params.subscribe(
(param: any) => {
let id = param[ …在路由配置的根组件中,我有一个按钮.当我单击此按钮时,我想在激活的子路径中触发一个事件.
我一直在努力解决这个问题,而且唯一看起来很有希望的是使用双向服务(链接到角度文档).但是,我不知道如何让它发挥作用.
这是一个证明:
https://plnkr.co/edit/7zDTTTlABWD2GFo01jaz?p=preview
我已经设置了一个简单的路由配置,它自动重定向到TestComponent.当我点击路线应用程序级别的"单击"按钮时,我希望能够clickDetected()在TestComponent中触发该功能.
希望一切都清楚 - 任何建议表示赞赏!
代码如下;
app.component
@Component({
selector: 'my-app',
template: `
<input type="button" (click)="onClick('hello')" value="click" />
<router-outlet></router-outlet>
`,
})
export class AppComponent {
constructor(private testService: TestService) {
}
onClick(v){
this.testService.declareClick(v)
}
}
test.service
@Injectable()
export class TestService {
private clickedSource = new Subject<string>();
clicked$ = this.clickedSource.asObservable();
declareClick(value: string) {
console.log(value)
return this.clickedSource.next(value);
}
}
test.component
@Component({
selector: 'my-test',
template: `
<div>
<h1>Test Component</h1>
</div>
`,
})
export class TestComponent implements OnInit { …我有一个routerLink附加到我在angular2组件的HTML中创建的表中的前导值.单击该表值后,我希望routerLink不仅可以发送到下一个组件,还可以将所选值带到下一个组件.
当前代码示例
<a [routerLink]="['/Records']" ><td> {{Member.Name}} <td></a>
我有链接,所以它发送到记录页面,但是如何将名称发送到该组件,以便我可以显示我试图显示的特定记录？
我有一个受canActivate防护保护的组件.checkLogin函数中的Authguard 从一个observable订阅,但我不知道如何从它返回一个布尔值到canActivate.
guard.service.ts
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
let url: string = state.url;
return this.checkLogin(url);
}
public checkService:boolean;
checkLogin(url: string):boolean {
return this.loadAppSettings().subscribe(res=>{
console.log(this.checkservice);
if (this.checkservice == true)
{
return true;
}
else{
this.router.navigate(['/error-user']);
return false;
}
});
}//checkLogin throws error as type subscription is not assignable to type boolean
所以我想要的是如果它this.checkService是真的它应该返回true并且用户应该能够登陆被保护的路线但是如果它是假的,他应该被导航到error-user.
Angular2 - 返回布尔值,订阅canActivate这个问题与我的类似,但无法解决我的问题.
有人可以在这帮忙.
我有一个模块与我的应用程序的路线.其中一条路线是延迟加载模块.
问题是这个延迟加载模块内部有子组件的路由.但是在我的路由器配置上这条路线没有出现......所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容.
这是我的路由器配置(主模块):
export const MODULE_ROUTES: Route[] =[
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'calendar', loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]},
{ path: '**', component: NoPageFoundComponent, pathMatch: 'full' }
]
.
.
.
@NgModule({
imports: [
RouterModule.forChild(MODULE_ROUTES)
.
.
.
在我的懒惰模块上:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar', component: CalendarComponent, canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '', component: MainCalendarComponent, canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user', component: EditEventComponent, …angular ×10
angular2-routing ×10
angularjs ×2
html-table ×1
lazy-loading ×1
routerlink ×1
rxjs ×1