标签: angular2-routing

我想知道是否可以向 RouteConfig 装饰器中定义的路由添加自定义属性。

我想添加任何需要身份验证的路由：

@RouteConfig([
  {
    path: "/login",
    name: "Login",
    component: LoginComponent,
    authenticate: false,
  },
  {
    path: "/home",
    name: "Home",
    component: HomeComponent,
    authenticate: true
  }
])

如果这是可能的，我如何在组件中获取值“authenticate”？

在 angular2 rc5 中，我有这个代码。

this.router.routerState.parent(this.route).params.forEach((params: Params) => {
    url = params['url'];
    id = +params['id'];
});

我不得不使用它，因为我在我的路由器上低了两个级别，并且由于某种原因这样做不起作用。

this.route.params.forEach((params: Params) => {
        url = params['url'];
        id = +params['id'];
    });

我仍然很乐意这样做，但是在 angular2 中，routerState 上.parent不再存在该方法。

我可以实现我想要的，但使用 angular 2.0.0 中可用的不同方法吗？

我的路由配置方式如下:

RouterModule.forRoot([
    { path: '', redirectTo: 'main', pathMatch: 'full' },
    { path: 'main', component: SummaryComponent, children: [
        { path: 'data/:deviceId/:incidentId', component: DeviceMetricsComponent },
        { path: 'incident/analysis/:incidentId', component: IncidentAnalysisComponent },
      ] 
    },
    { path: 'test', component: TestFullPageComponent, children: [
        { path: 'test2', component: TestFullPageChildComponent}
      ] 
    },

    { path: 'logs/jobs/:jobtype', component: JobLogsComponent, pathMatch: 'full' },
    { path: '**', redirectTo: 'main' }
])

这是我的"主要"模板:

<div class="row">
    <div class="col-md-12">
        <!-- Some links are in this table that load into the router-outlet below -->
        <app-incident-node-table …

我有一个组件显示使用ng2-bootstrap tabset和tab.

例:

<tabset>
    <tab heading="Info" [active]="tabs[0].active">
        <account-data *ngIf="tabs[0].active"></account-data>
    </tab>
    <tab heading="Users" [active]="tabs[1].active">
        <manage-users *ngIf="tabs[1].active"></manage-users>
    </tab>
    <tab heading="Billing" [active]="tabs[2].active">
        <account-billing *ngIf="tabs[2].active"></account-billing>
    </tab>
</tabset>

注意:tabs[N].active由组件控制并已同步选项卡更改和路由.但我觉得我的做法是错误的,因为在选定的标签内部管理路由很困难.让我们看第二个标签,在一天结束时它应该管理以下子路径:

.../users          -> provide list of users
.../users/new      -> create new user
.../users/:id      -> show a particular user
.../users/:id/edit -> edit a particular user

这并不容易,因为显示标签的组件已经使用了这条路线:

.../:tab

如果有这样的事情会更容易:

<tabset>
    <tab heading="Info" [routerLink]="['info']"></tab>
    <tab heading="Users" [routerLink]="['users']"></tab>
    <tab heading="Billing" [routerLink]="['billing']"></tab>
</tabset>
<router-outlet></router-outlet>

有人为此解决了吗？这个问题应该很常见......

我在一个应用程序上工作,我打算有以下结构:

-MAIN -  main “container” (main routes)    
--NCF (lazy loaded, routes for it’s subapps)    
---ACNP (lazy loaded)    
----Component1    
----Component2    
---SubApp2 (lazy loaded)    
---SubApp3 (lazy loaded)    
--App2 (lazy loaded)    
--App3 (lazy loaded)    
--…

这是应用程序的起始框架,它将有3个级别 - 主要,应用程序和子应用程序.每个应用程序和子应用程序都是独立开发的.将来可能会有更多延迟加载的级别.我希望在每个级别上独立维护路由,这意味着MAIN将处理NCF和App2和App3的路由(主要是延迟加载); NCF将处理ACNP,SubApp2和SubApp3的路由(再次大多是延迟加载); ACNP将处理其组件的路由.以下是它现在的样子:

MAIN-routes.ts:

import {Routes} from "@angular/router"

export const appRoutes: Routes = [
  {
    path: 'ncf',
    loadChildren: './ncf/ncf.module#NewCustomerFolderModule
  }
]

main.html中

<h1>FE2</h1>
<MAIN-nav></MAIN-nav>
<router-outlet></router-outlet>

MAIN-NAV

<a [routerLink]="['/ncf']">New Customer Folder</a>

它工作正常,在MAIN-nav内部我有链接懒惰加载NCFModule.

NCFModule.ts

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(ncfRoutes)
  ],
  declarations: [NewCustomerFolderComponent]
})

ncfRoutes.ts

import {Routes} from "@angular/router" …

我有一个具有以下路线的项目：

{ path: '', component: GamesListingComponent },

    { path: 'inicio', component: HomeComponent },

    { path: 'listar',
        children: [
            { path: '', component: HomeComponent },
            { path: 'fabricantes', component: ManufacturesListingComponent },
            { path: 'plataformas', component: PlatformsListingComponent },
            { path: 'usuarios', component: UsersListingComponent },
            { path: 'jogos', component: GamesListingComponent },
            { path: '**', component: HomeComponent }
        ]
    },

    { path: 'cadastrar',
        children: [
            { path: '', component: HomeComponent },
            { path: 'fabricantes', component: ManufacturesRegisterComponent },
            { path: 'plataformas', component: PlatformsRegisterComponent },
            { …

有没有办法将类应用于Angular中的每个路由组件.一种方法是使用host每个组件的属性

@Component({
    moduleId: module.id,
    selector: 'one',
    host :{class :'my-class'}
    templateUrl: 'one.html',
})

但我不想为每个组件写这个.

在这里,当我登录到我的应用程序时,我希望将json对象存储在本地存储中,然后将其分配给用户Object.第一次,如果我登录它将不会显示任何内容,但如果我刷新页面,我可以看到名字.

这是.ts文件

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
    user: Object;
    ngOnInit() {
    this.user = JSON.parse(localStorage.getItem('user'));
    }
}

在模板中我想像这样使用它:

<p> {{ user.first_name }} </p>

我怎么解决这个问题？

我正在用angular 5构建一个应用程序。在我的HTML页面中，我有一个表，该表显示被查询的数据。此数据被显示在AG-网格使用指示。网格中的一列显示为HTML链接。我正在使用cellRendererFramework功能将列中的值显示为链接。它工作正常，并在表格中为每一行显示该列的值上的链接。我的要求是，我想将其他参数从主组件类传递给cellRendererFramework组件。我需要这个的原因是，当单击链接时，Angular应用程序使用angular路由器显示新组件，并且我需要将多个值传递给其他组件。

this.columnDefs = [
      { headerName: "Hotel ID", field: "HotelID", width: 500,
        cellRendererFramework: LinkcompComponent },
      { headerName: "Account Number", field: "AccountNumber" , width: 700 },
      { headerName: "Customer Name", field: "PartyName", width: 670  }
    ];

<a [routerLink]="['/trxDetails',params.value]">{{ params.value }}</a>