标签: angular2-routing

我试图从click事件的函数显式导航到路由

<a (click)="loadContact()">Contact</a>

AppComponent class是这样定义的

export class AppComponent{

    constructor(private _router:Router){}

    public loadContact = function(){
        ...
        ...
        this._router.navigate('[Contact]');
    }
}

但是我收到了这个错误

TypeError: linkParams.forEach is not a function

我如何解决它？

编辑:

这是RouteConfig

@RouteConfig([
    { path: '/contact', name: 'Contact', component: ContactsComponent },
    { path: '/notes', name: 'Notes', component: NotesComponent }
])

我面临着Angular2路由器和异步管道的问题.

我试图渲染一个RxJs Observable,数据不会自动渲染.

必须单击链接以获取要呈现的数据的路径.

这是根应用程序:

import {bootstrap}    from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component.ts';

bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);

这是根组件:

import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {FirstComponent} from './app.first-component.ts';
import {SecondComponent} from './app.second-component.ts';
import {AppService} from "./app.services.ts";


@Component({
    selector: 'my-app',
    providers: [AppService, FirstComponent, SecondComponent],
    directives: [FirstComponent, SecondComponent, ROUTER_DIRECTIVES],
    template: `<h1>An Angular 2 App</h1>
               <a [routerLink]="['First']">first-default</a> 
               <a [routerLink]="['Second']">second</a> 
               <router-outlet></router-outlet>`
})
@RouteConfig([
    {path: '/', name: 'First', component: FirstComponent, useAsDefault: true},
    {path: '/second', name: …

我开始开发Web应用程序并选择Angular 2作为前端框架.我目前正在尝试使用Auth0进行用户授权.问题如下:我正在尝试实现登录页面登录 - >重定向功能.打开网站后,应立即检查是否有用户的令牌localStorage,然后显示登录窗口小部件或重定向到主页.但我遇到了这个非常讨厌的错误:

当我登录时,页面刷新并且小部件再次出现:tokenNotExpired()由于某种原因返回false.我按下相同的凭据再次登录 - 页面刷新,登录小部件消失,现在tokenNotExpired()返回的日志显示true,但我的重定向仍然无法正常工作.如果我现在只输入我的基地址http://localhost:4200,它成功地将我重定向到home并tokenNotExpired()返回true.

我试过调试但没有运气 - 我找不到它失败的地方.

从本质上讲,由于我缺乏经验,我非常确定我在编写重定向功能时遇到了问题.我非常感谢任何帮助,一直坐在这上面.

我包含了省略冗余部分的代码摘录.我通过在main.ts中引导它来全局注入Auth服务.

app.routes.ts:

import {provideRouter, RouterConfig} from "@angular/router";
import {AuthGuard} from './secure/auth.guard';
import {AdminGuard} from "./secure/admin.guard";

import {UserHomeComponent} from "./main/user-cpl/user-home.component";
import {AdminHomeComponent} from "./main/admin-cpl/admin-home.component";
import {LoginPageComponent} from "./login/login-page.component";

const APP_ROUTES: RouterConfig = [

  { path: 'home', canActivate: [AuthGuard],
    children: [
      { path: '', component: UserHomeComponent },
      { path: 'admin', component: AdminHomeComponent, canActivate: …

我在一个页面上有一个带有2个输入框的表单,当我单击提交时,路由器导航到另一个页面,其中包含2个输入框和一个提交按钮.

到目前为止,我已设法将查询参数传递到第二页并预填充输入框.

问题是,当我点击第2页的提交按钮时,输入框中的值不会被提交.如果我"触摸"框并输入其他内容,则提交工作正常并且正在提交编辑的值.

第一页(我将剩下的代码遗漏,这部分工作正常)

this._router.navigate(['/dashboard/test/new'], 
{ queryParams: {'name': this.name.value , 'lastname':this.lastname.value}});

第2页

private subscription: Subscription
paramName: string;
paramLastName: string

this.subscription = this.activatedRoute.queryParams.subscribe(
  params => {
    this.paramName     = params['name'];
    this.paramLastName = params['lastname'];
  }
)

这是html:

<form [formGroup]="myFormTest" (ngSubmit)="onSubmitNew()" class="onl_loginForm" novalidate>
      <div class="form-group">
        <label for="name" class="control-label">Name </label>
        <input type="text" formControlName="name" class="form-control" id="name"  value="{{paramName}}" required>
      </div>
      <div class="form-group">
        <label for="lastname" class="control-label">Last Name </label>
        <input type="text" formControlName="lastName" class="form-control" id="lastname" value="{{paramLastName}}" required>
      </div>
<button type="submit" class="btn-save">Submit</button>
</form>

如何强制表单"读取"两个输入字段值而不触及它们？

我最近开始玩角度2,到目前为止我的经验很棒.我有一些很好的经验ng1,并React为好.所以,这更像是一个普遍的问题,也是一个混乱.我很确定这会帮助很多其他人以及我没有真正找到任何直接答案.

所以,假设我已经module protected.module.ts注册了一些组件.因此,为了使用原始指令,ngFor, ngIf我必须导入CommonModule到特定模块,但是我必须将其导入主入口模块,即app.module.ts.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { CommonModule  } from '@angular/common';
import { AlertModule  } from 'ng2-bootstrap';
import { LayoutModule } from './layout/layout.module';
import { UsersModule } from './users/users.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProtectedModule …

我在.Net MVC组件中加载了ng2代码,但控制台中显示以下错误:

例外:未捕获(承诺):错误:找不到加载'UsersComponent'的主要插座错误:找不到加载'UsersComponent'的主插座

知道问题可能是什么吗？我正在使用ng2-final,我的应用确实有效.但是,我被要求开发一个参考实现,所以我需要确保在页面加载后错误不会显示在控制台中.

我正在关注官方的Angular 2教程,它使用的导航功能与routerLink非常相似.他们之间有什么区别？哪个用的？

this.router.navigate(['/detail', this.selectedHero.id]);

[routerLink]="['/detail', hero.id]"

我看过一个例子，其中有两个<router-outlet>，其中只有一个具有name属性-所以我做了一个小测试：

我有此路由器映射：

export  const routing   = [
    {path:'', pathMatch:'full', component:EmptyComponent},
    {path:'dog',   component:DogComponent},
    {path:'bird',   outlet:'under', component:BirdComponent} 
];

我也有这个routerLinks：

<li><a [routerLink]="['']">Clear</a></li>
<li><a [routerLink]="['dog']">Only Dog</a></li>
<li><a [routerLink]="['/', {outlets: {under: ['bird','' }}]">Only Bird</a></li>
<li><a [routerLink]="['dog',{outlets: {under: ['bird','' }}]">Dog & Bird</a></li>

<router-outlet></router-outlet>
<hr>
<router-outlet name='under'></router-outlet>

题：

如果单击Clear-我什么都看不到（？）
如果我单击Only Dog-我只看到一只狗（？）
如果单击Only Bird-我看到了狗和鸟都（？-为什么？我只想看到一只鸟）单击Dog & Bird-我看到错误（？- 无法匹配任何路由。URL段：'dog'。我希望同时看到Dog和Bird）

这是为什么 ？以及如何解决我的代码，以便显示确切的链接描述？

人民解放军

是否相关-我认为它必须清除AUX路由（通过null传递无济于事routerLink -请参阅PLNKR2）

我刚从角度5更新到角度6,我面临角度动画的问题.

我做了标准升级

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli --migrate-only --from=1.7.4
ng update @angular/core
npm install rxjs-compat (most project probably need this)
ng serve

我还根据官方升级指南(https://update.angular.io/)从5.2到6 更新了我的代码库,但是有一个错误,我无法弄清楚.

ERROR in src/app/dispute-center/shared/services/dispute-store-service.ts(1,22): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no exported member 'transition'.

src/app/profile/profile-payments-and-billing/profile-payments-and-billing.component.ts(1,28): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no exported member 'trigger'.

src/app/profile/profile-payments-and-billing/profile-payments-and-billing.component.ts(1,37): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no exported member 'state'.

src/app/profile/profile-payments-and-billing/profile-payments-and-billing.component.ts(1,44): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no exported member 'style'.

src/app/profile/profile-payments-and-billing/profile-payments-and-billing.component.ts(1,51): error TS2305: Module '"/var/www/html/xxx-angular/node_modules/@angular/core/core"' has no …

我正在研究Angular 6项目.自从过去几天我遇到了以下问题.请指导.

我的程序基于延迟路由,也有动态路由.以下代码是我的app-routing.module.ts:

 const routes: Routes = [
      {
        path: 'login',
        loadChildren: './login/login.module#LoginModule'
      },
     // Here is my submodule 
      {
        path: '',
        loadChildren: './users/users.module#UsersModule'
      },
     // This is actually i want use to home page as blank 
      {
        path: '',
        loadChildren: './home/home.module#HomeModule'
      },
      { path: '**', redirectTo: 'not-found' }
    ];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

以下是我的内部/子模块:

  const routes: Routes = [
    {
    path: '',
     component: UsersComponent,
    children: [
        // How can redirect to the main route
    { path: '', …