标签: angular2-routing

我用angular-cli创建了角度2项目.我创建了单独的AppRoutingModule,它导出了RouterModule并被添加到AppModule进口数组中.

我还有由angular-cli创建的appComponent.

app.component.html

<nav>
  <a *ngFor="let view of views" routerLink="{{ view.address }}" routerLinkActive="active">{{ view.text }}</a>
</nav>
<router-outlet></router-outlet>

app.component.spec.ts

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';


describe('App: AquaparkFrontend', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    });
  });

  it('should create the app', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have 3 views`, () => { …

我有一个现有的Angular 2 App.现在我想使用路由进行导航.有没有办法使用Angular 2 Cli向现有的Angular 2项目添加路由？

假设我有一个组件"测试",并希望在全局范围内找到一条路径.

我有以下路由配置,但我收到错误 Invalid configuration of route 'tenant': redirectTo and children cannot be used together

一旦我点击/租户,我想以某种方式显示两个租户的内容,然后审计？这可能吗 ？我的租户网址如下所示http://localhost:8080/#/tenant

{
    path: 'tenant',
    redirectTo: '/tenant/(view:audit)', 
    pathMatch: 'full',
    component: TenantComponent,
    data: {
        authorities: ['ROLE_USER', 'ROLE_ADMIN'],
        pageTitle: 'tenant.home.title'
    },
    children: [
        {
            path: 'audit',
            component: PacketDataComponent,
            data: {
                authorities: ['ROLE_USER', 'ROLE_ADMIN'],
                pageTitle: 'tenant.home.title'
            },
        }
    ]
}

我的组件显示,但加载页面时收到错误消息.在查看一堆资源后,我似乎无法解决错误消息.

错误

EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'index.html'. Available routes: ['/login'].

main.component.ts位于index.html中,一旦页面加载,它就会显示上面的错误消息.

import { Component } from '@angular/core';
import { Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router';

import { LoginComponent } from './login/login.component';

@Component({
    selector: 'main-component',
    template: 
      ' <header>
           <h1>Budget Calculator</h1>
           <a id='login' [routerLink]="['/login']">Login</a>
           <router-outlet></router-outlet>
        </header> '
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS]
})

@Routes([
    {path: '/login', component: LoginComponent}
])

export class MainComponent {}

login.component.ts通过main.component.ts路由,并在我点击链接时显示,尽管有错误消息.现在我将它设置为在main.component中弹出其他元素,但希望它是页面上显示的唯一组件.基本上用index.component替换index.html中的main.component,如果可能的话,而不是做一大堆样式来显示:none.

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

@Component({
    selector: 'login',
    template: 
        ' <div …

我试图弄清楚如何使用Angular2路由器导航(路由器3.0.0-alpha.7)与查询参数.

我可以使用此行轻松导航到带有queryParam的路径:

this._router.navigate(['/login'], {queryParams: {redirect: 'route1'}});

在'/ login'组件中,​​我做了一些登录,它将重定向到redirect路由,即route1.但是,重定向后,redirect查询参数保留在URL中,即我现在在页面/route1?redirect=route1.我想在这里删除重定向参数.

此外,如果我然后导航到具有相同redirectqueryParam的另一个页面,它不会覆盖前一个页面,但会?redirect=...在URL中添加另一个页面.即:

this._router.navigate(['/another-route'], {queryParams: {redirect:'route2'}});

引导我 /another-route?redirect=route2?redirect=route1

在路由之间导航时是否可以清除queryParams？我试过this._router.navigate(['/route1'], {queryParams: {redirect: null}});,{queryParams: null}等等但没有成功.

我正在将我们的一个应用程序从rc4更新到angular2.0.0,我在运行时遇到模板解析错误.这是我的视图模板:

<div *ngFor="let widget of widgets" class="col-xs-3 quick-link">
    <a [routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">
        <div class="tile-icon">
            <span [className]="widget.IconCssClass"></span>
            <span *ngIf="widget.BadgeNumber > 0" class="badge">{{widget.BadgeNumber}}</span>
        </div>
        <h4>{{widget.Text}}</h4>
    </a>
</div>

错误发生在routerlink上.这是错误:

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("

    <div *ngFor="let widget of widgets" class="col-xs-3 quick-link">
        <a [ERROR ->][routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">
            <di"): LdrComponent@4:19
Can't bind to 'ngIf' since it isn't a known property of 'span'. ("tile-icon">
                <span [className]="widget.IconCssClass"></span>
                <span [ERROR ->]*ngIf="widget.BadgeNumber > 0" class="badge">{{widget.BadgeNumber}}</span>
            </div>
     "): LdrComponent@7:22

routerLink对我来说似乎没有变形......我做错了什么？

我Pageview在Google跟踪代码管理器中有跟踪SPA网页浏览量的标记,与本指南中描述的相同.基本上,它是具有链接的Google Analytics ID的通用分析,它是在历史记录更改时All Pages触发的(在某些时候,触发器也被添加但没有成功).

在我当前的应用程序中,GTM会Pageview在没有异步解析器的所有路由上的初始页面浏览量上跳过标记.通常路由有时会触发标记(5次中的1次),这可能会有所不同,具体取决于条件(缓存与未缓存,本地主机与生产).

在具有长持续时间(> 1s)的解析程序的路径上,Pageview始终在初始网页浏览中触发标记(5次中的5次).

Pageview应用初始化(pushState)后,在所有路由上正常触发标记.

GTM调试控制台和GA实时监控确认了此行为.

设置似乎是推荐的,GTM代码段被加载<head>,Angular 2应用程序在末尾加载<body>.

<html>
  <head>
    <script>/* Google Tag Manager snippet */</script>
    ...
  </head>

  <body my-app>
    ...
    <script src="my-app-bundle.js"></script>
  </body>
</html>

Angular 2像往常一样被引导:

platformBrowserDynamic().bootstrapModule(MyAppModule);

我试图在前后移动GTM代码段my-app-bundle.js,甚至用同步代替它:

<script>
  window.dataLayer = ...
</script>
<script src="https://www.googletagmanager.com/gtm.js?id=..."></script>

默认代码段没有区别.

我通过反复试验发现,Pageviews如果应用程序以相当大的延迟,200-1000毫秒进行自举,则开始在初始页面浏览量上正常工作(起初DOMContentLoaded似乎有诀窍,但延迟还不够):

setTimeout(() => {
  platformBrowserDynamic().bootstrapModule(MyAppModule);
}, 1000);

我希望这个问题对于使用SPA/Angular 2应用程序完成GTM的专家来说很熟悉. …

我正在从官方文档中学习Angular 2的 应用程序路由.我正在通过以下代码.

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

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' },
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

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

它创建AppRoutingModule并定义routes它.我无法理解的部分是为什么我们需要再次导出RouterModule？我相信它是核心角度模块之一,可以通过导入随处可用@angular/router.

我正在从一个组件路由到另一个组件.路线完成后,我想使用上一条路线的URL.我已将下面的代码放入要路由到的组件的构造函数中,但它不会在第一个路径上触发.在第一个路径之后,该功能每次都会触发.

this.router.events
      .filter(e => e instanceof NavigationEnd)
      .pairwise().subscribe((e) => {
          console.log(e);
    });

如果我删除成对功能,它似乎在第一条路线上触发,但它只列出当前路线,而不是前一路线.

 router.events
  .filter(e => e instanceof NavigationEnd)
  .subscribe(e => {
    console.log(e);
 });

我的目标是在新组件路由到时检索先前的路由.我在这做错了什么？

我面临着问题formGroup.首先基于URL我采取一些价值并调用API来检索前场文本的特定用户数据.

register.html

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
    <div class="form-group row">
        <label for="inputEmail3" class="col-sm-4 ">Username</label>
        <div class="col-sm-8">
            <input [formControl]="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly">
        </div>
    </div>
</form>

register.component.ts

import { Component } from '@angular/core';
import { FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { EmailValidator, EqualPasswordsValidator } from '../../theme/validators';

@Component({
  selector: 'register',
  templateUrl: './register.html',
})
export class Register {
  public form: FormGroup;
  public email: AbstractControl;
  public username: string;

  constructor(private registerService: RegisterService, …