标签: angular2-routing

您好我想通过角度4传递一些参数

APP-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { StartGameComponent } from './start-game/start-game.component';
import { GameComponent } from './game/game.component';


const appRoutes: Routes = [
  { path: '', redirectTo: '/first', pathMatch: 'full' },
  { path: 'startGame', component: StartGameComponent },
  {path: 'game/:width/:height',component: GameComponent
  }

];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

在组件StartGameComponent中

      goToGameComponent(width:string,height:string){
      this.router.navigate(['game', {width:width,height:height}]);
}

在组件GameComponent中

 ngOnInit() {
        this.route.params.forEach((urlParams) => {
          this.width= urlParams['width'];
          this.height=urlParams['height'];

        });

在app.component.html中 …

由于我是角度2/4的新手,因此根据我的需要设置新应用程序时遇到问题.

我正在尝试构建一个将从另一个应用程序调用的应用程序.调用应用程序将发送一些参数,如令牌,用户名,应用程序ID等.

现在,与Angular 2/4一样,app.component是我们的登陆组件,每个第一个请求都将通过它.所以,我想在app组件中获取这些参数并加载一些用户细节,进行本地会话以及移动到其他东西.

问题是,当我试图访问这些参数时,我得到了任何东西.

这是将启动我的角度应用程序的URL: http:// localhost:86/dashboard？username = admin&token = xyz&appId = 8

这是我的路由文件代码:

const routes: Routes = [
  {
    path: 'dashboard/:username, token', component: AppComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

这是我的应用程序组件代码:

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from 'app/services/authentication/authentication.service';
import { User } from 'app/models/user/user';
import { AppConfig } from 'app/helpers/AppConfig';
import { ActivatedRoute, Router } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
}) …

使用Angular2创建单页面应用程序,我将拦截未经身份验证的用户访问自定义中的非公共路由RouterOutlet并将其重定向到登录视图.成功登录后,我想将用户重定向到最初请求的视图,而不是默认视图.

我注意到Router有一个renavigate()导航到最后一条成功路线的功能,但最后一条成功的路线是,/auth/login而不是最初请求的网址.

基本上:我如何访问或确定以前请求的URL？

我真的不想求助于传递查询字符串参数,除非我真的需要.理想情况下,访问history集合作为Router组件的一部分会很好,类似于backbone.history!

我正在使用Angular2开发NodeJS应用程序.在我的应用程序中,我有一个主页和搜索页面.对于主页,我有一个HTML页面,它将为localhost:3000 /和主页用户导航到搜索,即localhost:3000 / 我通过angular2路由处理的搜索页面.

我没有搜索页面的页面,其视图由angular2呈现.但是当我直接命中localhost:3000/search因为我在我的节点应用程序中没有这个路由时它会给出错误.

我不知道如何在节点应用程序中处理这个？

我正在尝试从rc1迁移到rc4,我无法获取查询字符串参数.ActivatedRoute对象始终为空.

hero.component.ts

import {Component, OnInit} from "@angular/core";
import {Control} from "@angular/common";
import {ROUTER_DIRECTIVES, ActivatedRoute} from '@angular/router';

@Component({
    template: '../partials/main.html',
    directives: [ROUTER_DIRECTIVES]
})

export class HeroComponent implements OnInit {

    constructor(private _activatedRoute: activatedRoute) {

    }

    ngOnInit() {
        this._activatedRoute.params.subscribe(params => {
            console.log(params);
        });
    }
}

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {HTTP_PROVIDERS, RequestOptions, Http} from '@angular/http';
import {AppRouterProviders} from './app.routes';

bootstrap(AppComponent, [
    AppRouterProviders,
    HTTP_PROVIDERS
]);

app.component.ts

import {Component, OnInit} from '@angular/core';
import {HeroComponent} from './hero.component';
import {RouteConfig, Router, ROUTER_DIRECTIVES} from '@angular/router';


@Component({
    selector: …

升级到Angular 2 RC5(来自RC4)后,我似乎无法再注入ActivatedRoute我的组件.

原始例外:没有ActivatedRoute的提供商!

这是相关的代码:

import { Component } from '@angular/core';

import { 
  ActivatedRoute
} from '@angular/router';

declare var module: {
  id: string;
};

@Component({
  moduleId: module.id,
  selector: 'mds-app',
  templateUrl: 'app.component.html',
  styleUrls: [
      'app.component.css'
  ],
  directives: []
})
export class AppComponent { 

  constructor(private _route: ActivatedRoute) {
    this._route.params.subscribe(params => console.log(_route));
  }
}

这是我的app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule }  from '@angular/common';
import { Routes, RouterModule }  from …

从角度文档:

路由器链接指令始终将提供的输入视为当前URL的增量.

例如,如果当前网址是/user/(box//aux:team).然后,以下链接<a [routerLink]="['/user/jim']">Jim</a>将生成链接/user/(jim//aux:team).

那么如何创建链接/user/jim？

我试过['/user/jim', { outlets: { aux: null }}]但这不起作用.
即使它起作用也不是最佳解决方案.我宁愿寻找一种方法来导航到一个绝对网址,而不是取消可能的网点.

编辑:

在同一主题上,我有一个到根的链接:routerLink="/"就是这样,它重定向到我的应用程序的根目录,没有像绝对链接那样的出口.这里有趣的是我并不特别想要那个特定链接的行为,保持任何网点路线都很好......

我有一个应用程序,分为经过身份验证的部分(InternalRootComponent)和匿名部分(ExternalRootComponent).

当我明确导航到路径时,一切正常,但是当我转到根(/)时,我没有被重定向.此外,由于某种原因加载AccountsComponent.

APP-routing.module.ts:

export const routes: Routes = [
    {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
    },
    {
        path: 'login',
        component: ExternalRootComponent,
        children: [
            {
                path: '',
                loadChildren: './login/login.module#LoginModule'
            }
        ]
    },
    {
        path: 'membership',
        component: ExternalRootComponent,
        children: [
            {
                path: '',
                loadChildren: './membership/membership.module#MembershipModule'
            }
        ]
    },
    {
        path: 'app',
        component: InternalRootComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                canActivateChild: [AuthGuard],
                children: [
                    {
                        path: '',
                        redirectTo: './dashboard',
                        pathMatch: 'full'
                    },
                    {
                        path: 'dashboard',
                        loadChildren: './dashboard/dashboard.module#DashboardModule'
                    },
                    {
                        path: 'accounts', …

我以这种方式在routing.ts文件中定义了路由.

const routesapp: Routes= [
{path:'user/id', component:UserComponent}
];
export const:routing ModuleWithProviders = RouterModule.forRoot(routesapp, {useHash:true});

并在HTML中

<li class ="Some class">
    <a href= "#/user/{{id}}"> Link </a>
</li>

如何将其转换为与[routerLink]一起使用？从之前的帖子中我了解到我们无法使用[routerLink]添加插值,即[routerLink] = ['user/{{id}}']

我想在HTML中添加插值,我无法将其添加到路由文件中.另外,如何在HTML中覆盖useHash路由文件？

我正在开发angular2 web应用程序,我需要以下帮助.我的页面由多个组件组成.我想在用户点击按钮时滚动页面顶部.我试过 document.body.scrollTop = 0;但这不适用于Chrome.我试过document.documentElement.scrollTop = 0; window.scrollTo(0,0); 但没有工作