标签: angular2-routing

我正在使用新的Router v3.0.0-alpha.3.想象一下我的路线如下:

                              App
                              /\
                             /  \
                       Settings  Main
                          / \        
                         /   \      
                       User  Account

从用户组件的角度来看,我想导航到主要组件.如果我导航到设置级别中的任何组件它工作正常,但当我尝试导航到其他级别时,我收到一个错误:

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property '_routeConfig' of null

我使用routerLink指令naviagate:

[routerLink]="['/main']"           <- doesn't work
[routerLink]="['/settings']"       <- works
[routerLink]="['/settings/user']"  <- works

这似乎是一个全球性问题.我只能在同一级别内导航.任何想法我怎么能绕过它？

我的路由传递给bootstrap:

export const routes: RouterConfig = [
    ...MainRoutes,
    ...SettingsRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

main.routes.ts:

export const MainRoutes: RouterConfig = [{
    path: '/main',
    component: SettingsComponent
}];

settings.routes.ts:

export const SettingsRoutes: RouterConfig = [{
    path: '/settings',
    component: SettingsComponent,
    children: …

我正在使用Angular 2路由器更新搜索应用程序的URL中的查询参数.我试图用+符号替换查询中的空格.但是,+符号正在编码.例如:

this.router.navigatebyUrl('?q=one+two');

使用"？q = 1%2Btwo"填充URL.

在查看Angular 2的源代码时,看起来路由器将URL转换为UrlTree ,它使用encodeURIComponent()对url进行编码.因此,不可能阻止默认编码.

我目前的过程是通过如上所示执行navigateByUrl来更改路径,然后通过以下方式侦听更改:

this.routeSubscription = this.route.queryParams.subscribe((params: any) => {
  this.term = (params.q ? params.q : '');
});

是否有另一种方法来处理查询参数,这些参数允许我使用自己的策略进行网址编码？

我想在我的Angular 2应用程序中进行路由时禁用更改URL.

我知道skipLocationChange: true必须作为NavigationExtras参数传递给路由器.

我的问题是:

是否可以从模板内部将NavigationExtras传递给routerLink？

我尝试过的:

<h1>
  {{title}}
</h1>

<ul>
    <li><a [routerLink]="['route1', { skipLocationChange: true }]">Route1</a></li>
    <li><a [routerLink]="['route2', { skipLocationChange: true }]">Route2</a></li>
</ul>

<router-outlet></router-outlet>

但它不起作用.

单击链接后,路径将更改为 http://localhost:4200/route2;skipLocationChange=true

我不想this.router.navigate(['route1], {skipLocationChange: true)在我的控制器中使用,因为那时我失去了routerLinkAtive突出显示.

这个问题很简单,但我无法摆脱它.

我有一个<header>父模板,我需要它通过路由模块显示子模板时消失.我期望在header标签中添加一个类,以便我可以通过CSS隐藏它.这就是我所拥有的:

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app',
  template: `
    <header [class.hidden]="hide">
      <h1>My App</h1>
      <ul>
            <li><a href="/home"></a></li>
            <li><a href="/showoff"></a></li>
      </ul>
    </header>
    <router-outlet></router-outlet>
  `
})

export class AppComponent {
  hide = false; // <-- This is what I need to change in child component
}

APP-routing.module.ts

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

import { HomeComponent } from './welcome.component';
import { ShowOffComponent } from './show.off.component';

const routes: Routes = [
  { path: '', component: HomeComponent …

我们有一个已经存在的大型MVC 5 ASP.NET 4.5.1 Web应用程序.由于它涵盖了如此多的领域,核心概念是每个页面都是它自己的应用程序.除了JQuery,常规Javascript和Handlebars模板之外,所有现有页面都不使用任何其他页面.

Angular 2似乎非常令人兴奋,但我正在试图弄清楚它将如何与我们的理念一致.例如,下面是我们的mvc路由如何提供我们目前的单独应用程序...

区/控制器1 /措施1(应用)

区/控制器1 /措施2(应用)

区/控制器2 /措施1(App3的)

等等

然后我们有单独的API控制器来提供我们的JSON数据.从Angular 2的初步读物/学习开始,我似乎无法理解我将如何为不同的应用程序提供服务(因为我能找到的所有内容总是希望将index.html作为主页,如果你真的在制作SPA,这是有道理的).从本质上讲,我们正在尝试通过现有结构提供多个SPA来继续开发,而不必更改站点上较旧的"遗留"应用程序以使用Angular,直到它们被单独重新访问,并找出如何有效地进行路由.

路由:所以在我脑海中的一个例子就是 Area/Controller/Action(App)/routeUrlstuff

我仍然希望能够让他们复制并粘贴扩展链接并使用角度路由返回,而不是仅仅切断该URL并在其起始点启动角度应用程序.

我真的没有任何代码可以显示,因为我正在尝试将当前项目作为概念证明,从现在开始使用Angular 2对于应用程序是可行的.

我使用角2.4版和路由器版"^ 3.4.10".

我正在尝试使用auth guard服务来处理重定向url.

当用户点击url'domain/assignment/3/detail'并且如果用户没有登录,则用户重定向到'domain/login'页面.当用户成功登录系统,然后重定向到用户尝试访问的"domain/assignment/3/detail"前一个URL.

我在分配模块上实现了CanLoad guard.因此,当用户尝试访问url'domain/assignment/3/detail'并且如果用户未登录时,url将存储到authservice(this.authService.redirectUrl)的redirectUrl属性中.

所以问题来自于我的情况.我无法获得用户点击的网址的完整路径.我在CanLoad后卫中获得"任务"而非"任务/ 3 /细节".我怎样才能获得完整路径,以便我可以将用户重定向到CanLoad后卫内的正确路径.

CanLoad:

 canLoad(route: Route): boolean {

            let url = `/${route.path}`; // here i got url path 'assignment' instead 'assignment/3/detail'

            return this.checkLogin(url);
        }

主要路由 app.routes.ts

const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent},
{
    path: 'assignment',
    loadChildren: './assignment/assignment.module#AssignmentModule',
    canLoad: [AuthGuard]
},
{ path: '**', redirectTo: '', pathMatch: 'full' }];

分配路由: assignment-routing.ts

       const assignmentRoutes: Routes = [
        {
            path: '',
            component: AssignmentComponent,
            canActivate: …

我是角度2的新手,我有一个名为Register的组件,在这1个组件中我有5个HTML页面,其中一次点击第一个注册页面,我将进入第二个注册页面,点击第二个注册页面,我将转到第3个注册页面.如何在一个组件中制作5个HTML页面我的意思是有没有办法在每个组件上实现多个模板？如何做路由？主要目的是拥有单独的HTML和SCSS文件和路由逻辑.

截至目前,我正在渲染页面,ngIf这使得我的页面非常冗长.有办法实现这个目标吗？

<!--View 1-->
        <div class="open-card-BG" *ngIf="registerView=='regView1'">
Register Page 1
</div>
            <!--View 2-->
            <div class="open-card-BG" *ngIf="registrationView=='regView2'">
Register Page 2
</div>


    @Component({
      selector: 'register-page',
      templateUrl: './register-page.component.html',
      styleUrls: ['./register-page.component.scss'],
      providers : [RegisterService,Configuration,LocalStorageService]
    })
        ngOnInit() {
        this.registerView= "regView1";
      }

    changeView(view) {

          this.registerView= view;
      }

      previousView(view) {

          this.registerView= view;
      }

我希望在我的应用程序中有以下路由:

export const routes: Routes = [
    { 
       path: ':universityId', 
       component: UniversityComponent,
       children: [
           { path: 'info', component: UniversityInfoComponent },
           { path: 'courses/:status', component: CoursesByStatusComponent }
       ]
    }
]

作为上/1/info或/1/courses/open网址,我该如何改变:universityId只UniversityComponent？

简单router.navigate(['../', 2], {relativeTo: currentRoute })不会这样做,因为它重定向到/2,丢失所有其他信息.使用'../2/courses/open也不是一种选择 - 那时我可以在任何儿童路线上.我能想到的最好的是:

const urlTree = this.router.parseUrl(this.router.url);
urlTree.root.children['primary'].segments[0].path = '2';
this.router.navigateByUrl(urlTree);

但它有点难看

我正在通过Angular 2开发一个MEAN项目,我正在设置各种页面的路由.我已经看到很多使用ModuleWithProviders进行路由的示例,而不是使用NgModule的angular.io示例(https://angular.io/guide/router)

这是标准的做事方式？如果其中任何一个是可以接受的,两者之间是否存在性能差异？

ModuleWithProviders示例:

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

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServicesComponent } from './services/services.component';

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full'},
    { path: 'about', component: AboutComponent },
    { path: 'services', component: ServicesComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

NgModule示例:

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

import …

如何重用我的Angular构建,这样我就不必为每个特定环境构建？

我们需要找到一种在Angular中运行时操作环境的方法!

我们为每个环境设置了设置,我们使用NG build --env = dev并为开发环境构建.如何更改QA,UAT和生产环境中的配置？

工具集:.Net Visual Studio Team Services,Angular 2

在运行时没有办法做到这一点吗？我们是否坚持构建时间/设计时间？

我们还可以考虑根据我们的网址选择具有后缀的环境吗？ https:// company-fancyspawebsite- qa .azurewebsites.net

PS:我们正在为每个环境使用Angular 2环境文件夹和应用程序设置文件.