标签: angular2-routing

Angular2路由器 - 任何人都知道如何在app.ts中使用canActivate,以便我可以重定向到主页,如果没有登录

我正在使用打字稿和角度2.

在我的app.ts文件中我的构造函数下的当前尝试:

   canActivate(instruction) {           
               console.log("here - canActivate");
               console.log(instruction);

               this.router.navigate(['Home']);  
   }

它目前没有被击中.知道为什么吗？

所以我使用以下帖子来弄清楚如何将片段添加到网址.

Angular2使用Hashtag路由到页面锚点

并且片段被添加得很好,但是页面不会移动到结果锚点.我已尝试在目的地上使用name和id属性div,但似乎都不起作用.

我使用的是Angular Version 2.0.0-rc.3和路由器版本3.0.0-alpha.6.

谢谢!

<a [routerLink]="[]" fragment="destination">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

2个元素之间有足够的空间来判断页面是否实际移动.

如前所述,网址正确地增加#destination了自己.

我反复遇到一种情况,我想访问路由器插座另一侧存在的子组件而不是选择器:

Like:
<router-outlet></router-outlet>

NOT:
<selector-name></selector-name>

这与我所知道的ViewChild功能相冲突,但似乎我的组件应该能够看到路由器内部的内容并与之交互,就像选择器标签内的内容一样容易.

比如我试过这个:

export class RequestItemCatsComp {
    @ViewChild('child') child: RequestItemsComp;
    ***etc...***
ngAfterViewInit() {
    if (this.child) // Always child is undefined
        this.groupId = this.child.groupId;
    }
}

但很自然,孩子是不确定的,因为这是错误的方式.有正确的方法吗？

我正在尝试使用服务来共享数据,但后来遇到另一个问题"表达在检查后已经改变",我希望能够在没有黑客攻击或启用prod模式的情况下解决这个问题.

假设我实际上是页面"结果"......

HTTP://服务器/结果; dateFrom = 2016年3月11日;页= 1

我作为结果页面,我想加载页面2,但我需要在浏览器上将URL字符串设置为http:// server/results; dateFrom = 03-11-2016; page = 2以防万一如果有人决定将其加入书签.

那么,如何以编程方式更改Web浏览器地址栏上的URL参数？

ty!

我们在此处提供了儿童路线定义,其中我们使用警卫来检查用户在使用我们的服务之前是否接受了条款.

帐户/秘密/ secret.routes.ts:

import { Routes } from '@angular/router';
import { SecretFormComponent } from './secret-form.component';
import { SecretTermsComponent } from './secret-terms.component';
import { TermsGuard } from './services/terms-guard.service';

export const secretRoutes: Routes = [
  {
    path: '',
    redirectTo: 'form'
  },
  {
    path: 'form',
    component: SecretFormComponent,
    canActivate: [TermsGuard]
  },
  { path: 'terms', component: SecretTermsComponent }

  // otherwise redirect to form
  { path: '**',  redirectTo: 'form' }
];

在我们的术语守护中,我们定义了以下代码:

this.router.navigate(['/account/secret/terms']);
return false;

有没有办法在"路由组"中使用相对路由导航重定向？因为如果有一天我们的帐户网站仪表板被重命名为my-account等其他任何东西,那么定义绝对路径可能会中断.我们希望我们的秘密模块可以重复使用.

我希望能够['./terms']在我的后卫中导航,但它不起作用,就像守卫不知道"从哪里"开始相对导航.

我需要从不是父母而不是祖母的路线获得参数,它只是在上面的某个地方,沿着通向根的路径.我知道Angular 2中显示的方法:从父组件或通过共享服务获取RouteParams但是我自己进入的情况(至少我认为是这样)使得那些不适合它的那些.所以这就是我得到的:

我有懒惰加载的子模块,需要id从父上下文.情况或多或少看起来像这样的路由配置:

// Parent/outer module routing
const outerRoutes: Routes = [
    {
        path: 'container/:containerId',
        component: ContainerComponent,
        children: [
            { path: 'model', loadChildren: 'app/container/model/model.module#ModelModule' },
            { path: '', component: ContainerDetailsComponent }
        ]
    }
];

// Child/inner module routing
const innerRoutes: Routes = [
    {
        path: '',
        component: ModelComponent,
        children: [
            { path: ':id', component: ModelDetailsComponent },
            { path: '', component: ModelsComponent }
        ]
    }
];

ModelsComponent需要加载Model属于给定的所有实例Container.所以我决定通过.parent …

我使用angular-cli创建了一个Angular项目(版本:1.0.0-beta.28.3).我使用"npm start"在开发环境中运行应用程序,应用程序在"localhost:4200"中正常运行.现在要复制生产部署,我想在本地WAMP中运行该应用程序.所以,我运行'ng build -prod',将文件从'dist'文件夹复制到WAMP的www/student目录.现在,当我通过WAMP运行项目时,我最终收到此错误:

显然,应用程序在错误的位置寻找所需的js文件.我做了一些研究,发现上下文根 - 在我的情况下'学生'必须在index.html内的"base href ="/ student"中设置.由于angular-cli的bug,每次我输入'ng build -prod',基本href被重置为"/".找到一个解决方法;键入"ng build -prod --base-href student"将基本href设置为student.

现在我遇到了一个新问题.默认页面应该显示路线'app-home'的内容,但是启动应用程序会给我:

但是,这两条路线/链接都运行良好.例如,单击"关于我们"会将网址更改为" http:// localhost:82/student/student/app-about-us "并显示相应的内容.

我很确定我的路由有问题.请帮我设置路由,以便我可以使用子网址" http:// localhost:82/student/student/app-home " 在" http:// localhost:82/student "中运行应用程序(默认)和' http:// localhost:82/student/student/app-about-us '

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { CarComponent …

我正在使用Angular 4,我想将一些对象传递给路由器但不更新查询参数.

user.component.ts

this.router.navigate(["/profile",{
   action: 'edit',
   user: {id: 1, name: 'test', email: 'test@mail.com'}
}]);

APP-routing.module.ts

{ path: 'profile', component: UserProfileComponent }

用户profile.component.ts

this.route.params.subscribe(params => {

});

有帮助吗？

我有一种情况,我一直在使用Resolve在导航到组件之前通过HTTP调用从远程源预加载一些数据.现在我需要实现一些保护逻辑,这需要根据某些条件预先加载数据以验证当前用户的某些字段.

我想避免向CanActivate守卫中的后端发出完全相同的请求,然后立即向后卫发出相同的请求Resolve.

有没有什么方法可以从CanActivate路径配置或路由配置中访问路由数据来临时覆盖解析器,只是设置数据对象的值,因为我已经得到了我要请求的内容？

我试着逃避一些简单的事情

route.data['myData'] = value;

但这是一个错误,因为"对象不可扩展".

我也试过类似的东西:

this.router.routerState.root.data['myData'] = value;

哪个没有产生任何错误,但是数据没有存活到方法的route.data元素中Resolve.resolve().

我想避免像定制或hacky这样的东西,就像临时将对象存储在服务上一样,就像某种缓存一样.是否有任何标准机制在内部路由器元素之间传输数据以支持高级预取和数据所有权检查等内容？

编辑 如果将路由器注入到Resolve类的构造函数中,并且以相同的方式访问它,则routerState可以正常工作.但这需要在之后清除,否则它会在导航呼叫之间保持不变.

在角度1.*中,我使用ui-router并且能够将NON URL参数从一个状态传递到另一个状态.通过NON URL参数,我的意思是传递一些不出现在URL上的参数(这对用户来说是完全透明的).

在Angular 1.*中执行此操作的方法是通过定义这样的状态(stateToRedirect是非url参数)

   $stateProvider
    .state('LOGIN_STATE', {
      url: `login`,
      component: 'login',
      params: {
        stateToRedirect: 'home'
      }
    });

并改变这样的状态:

  $state.go('LOGIN_STATE', {
    stateToRedirect: 'OTHER_STATE',
  });

在LOGIN_STATE中,我能够访问此参数:

$stateParams.stateToRedirect;

我正在尝试为Angular 2路由器找到相同的行为,我的理解是Angular 2路由器已经改进了很多,我们可能不需要使用ui-router-ng2.

所以我的问题是:你如何在Angular 2路由器中重现上述行为？

这个问题似乎是我想要的,但我不想在URL中使用参数,并且路径上的'data'属性看起来不错,但我找不到关于如何动态设置它的文档.