标签: angular2-routing

我在使用Angular2路线时遇到了麻烦.我有几个级别的嵌套.这是我的设置:我为未经身份验证的用户提供了最高级别的路由.登录后,他们就在/my路线下.在那个级别上,他们有一个仪表板,可以将它们带到/my/projects/关卡.路由下projects需要id.设置细节如下.这是最高级别AppComponent:

 @RouteConfig([
  {path: '/home', name:'Home', component: HomeComponent, useAsDefault: true},
  {path: '/login', name: 'Login', component: LoginComponent},
  {path: '/signup', name: 'SignUp', component:SignUpComponent},
  {path: '/my/...', name: 'MyApp', component: MyAppComponent}
])
export class AppComponent {
  constructor(private router: Router) {

  }

经过身份验证后,用户将转到MyAppComponent,其设置如下:

 @RouteConfig([
  {path:'/dashboard', name: 'MyDashboard', component: DashboardComponent, useAsDefault: true},
  {path: '/projects/...', name: 'MyProjects', component: ProjectRootComponent},
])

export class MyAppComponent {

  constructor(private router: Router) {
  }
}

DashboardComponent:

export class DashboardComponent {
  public projects: Array<Project>;
  public loaded: …

这是我注册用户并重定向到主页面的方法:

onSubmit(){
    this.userService.createUser(this.user).subscribe(function (response) {
            alert('Successfully registered');
            localStorage.setItem('token', response['token']);
            this.router.navigate(['Home']);
        }, function (err) {
            console.log(err);
        }
    );
}

在它上面,我有这个构造函数:

constructor(private router: Router, private userService: UserService){}

我添加ROUTER_PROVIDERS到主要组件:

providers: [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS
]

当我尝试注册用户时,我收到此错误:

TypeError: Cannot read property 'navigate' of undefined

我究竟做错了什么？

假设我有一个Component主要细节.我想URL反映细节部分的变化而不重新加载整个Component.

这就是我所拥有的:

home.routing.ts

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

import { HomeComponent } from "./home.component";
import { ItemListComponent } from "./item-list.component";

const homeRoutes: Routes = [
    {
        path: "home",
        component: HomeComponent,
        children: [
            {
                path: ":categoryId",
                component: HomeComponent
            }
        ]
    },
    {
        path: "home",
        component: HomeComponent
    }
];

export const homeRouting: ModuleWithProviders = RouterModule.forChild(homeRoutes);

home.component.ts

import { Component, OnInit } from "@angular/core";
import { Router, ActivatedRoute, Params } from …

我有URL http://www.localhost:4200/profile和http://www.localhost:4200/editProfile.这两个URL都提供给登录用户.现在我只想/editProfile通过可用的导航菜单访问,而不是直接在地址栏上写入URL并按Enter键.如果用户这样做,他将被重定向到/profile路径.

类似于允许POST /editProfile但没有GET的东西.

可以使用路由模块中提供的CanActivate来实现吗？

谢谢

所以,我试图使用angular2直接访问url,使用angular-cli.所以,当我访问网址http://192.168.56.103:3000/app时,应用程序和所有模块及其路径都能正常工作.

但是当我试图直接访问模块路径时(例如http://192.168.56.103:3000/employee/upload),我收到了这个错误:

upload:10 GET http://192.168.56.103:3000/employee/styles.e7a71cdafac175e58c1d2b9d347ab895.bundle.css 
upload:18 GET http://192.168.56.103:3000/employee/inline.d41d8cd98f00b204e980.bundle.js 
upload:18 GET http://192.168.56.103:3000/employee/styles.d6983b9a92d269fc6b29.bundle.js 
upload:18 GET http://192.168.56.103:3000/employee/scripts.916e0bd9d793165463ce.bundle.js 
upload:18 GET http://192.168.56.103:3000/employee/main.aa7bb73e6fe0d8821716.bundle.js 404 (Not Found)

它是这样的,Href Base不是http://192.168.56.103:3000/ root,但它是http://192.168.56.103:3000/employee.因此,我的应用程序遇到了一些错误,找不到这些文件.那么如何使用angular-cli服务器解决angular2中的问题呢？

此外,我试图在我的模块中添加一个基本Href,但没有任何反应,错误仍然相同:

import { CommonModule, APP_BASE_HREF }   from '@angular/common';

@NgModule({
  imports: [
  ],
  declarations: [

  ],
  providers: [
     ....
    {provide: APP_BASE_HREF, useValue : '/' }
  ]
})
...

我的路由如下所示:

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

const entity : string = 'employee';

const employeeRoutes: …

我正在尝试在Visual Studio 2015 asp.net core 1.1中设置angular 2，并且在构建时遇到此错误。

上图中的相关文件位于路由器文件夹中

这是我的package.json

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "e2e": "tsc && concurrently \"http-server -s\" \"protractor protractor.config.js\" --kill-others --success first",
    "lint": "tslint ./app/**/*.ts -t verbose",
    "lite": "lite-server",

    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
    "test-once": "tsc && karma start karma.conf.js --single-run",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0", …

在我的Angular 2应用程序中,我使用md-menu和md-icon-button显示带有电子邮件地址的弹出窗口.我希望弹出的电子邮件地址会在点击时实际触发用户的默认电子邮件设置.因为我通过字符串插值来提取数据,所以我还需要使用字符串插值生成这些电子邮件.这就是我现在拥有的:

<md-menu #emailMenu="mdMenu">
<button md-menu-item>{{record.email}}</button>
</md-menu>

<button md-icon-button [mdMenuTriggerFor]="emailMenu">
<md-icon>mail_outline</md-icon>
</button>

在哪里看到{{record.email}},我需要在这里构建它,以便触发默认的电子邮件行为(基本上就像mailto:function).我如何在Angular 2中执行此操作？

我会这样做吗？

<button md-menu-item><a href="mailto:{{record.email}}"></a></button>

或者有更好的方法吗？

我正在获取JSON数据,我将JSON数据存储在我的属性上.

this.ResultData_search=data.json().extras.ResultData 

this.ResultData=[

  {
        "First_name": "xx",
        "Email": "xxxx",
        "Phone": "xxx",
        "countryCode": "+91",
        "order_datetime": "xxx",
        "status": 11,
        "DeviceType": 3,
        "orderId": "59081a04c9ff6852a49dd32a",
        "orderseqId": "E00002347",
        "orderType": 1,
        "CustomerID": "xx",
        "pickAddress": "xx",
        "dropAddress": "xx",
        "pickLatitude": 17.4369414,
        "dropLatitude": 17.43673,
        "dropLongitude": 78.36710900000003,
        "paymentType": 2,
        "itemDescription": "",
        "receiverName": "uday",
        "receiverPhone": "xx",
        "itemName": "sanjay",
        "deliverycharge": "199",
        "bookingType": 1
      }
      }]

我想将所有键设置为表标题,将数据设置为表行.我参考了以下链接/sf/ask/2849950631/

链接2:动态地将列和数据加载到Angular 2中的表中

任何吸烟者对我都非常有帮助.

我有一个使用来自自定义的哈希路由的Angular 4应用程序<base href="/long/required/path/index.html">。这样做是因为需求说明此url必须是项目的根。我正在尝试使用哈希路由来解决此问题。

我看到的问题涉及解析给定路线的数据。给定一个URLlocalhost:8000/long/require/path/index.html#/project/1/document/55

和 app.routes.ts

export const ROUTES: Routes = [
 {
  path: 'project/:projectId/document/:documentId',
  component: DocumentViewerComponent,
  resolve: { document: DataResolver}
 },
 { path: '**',    component: NoContentComponent }
];

解析器在此处运行并按预期检索数据。

@Injectable()
export class DataResolver implements Resolve<Document> {

constructor(
 private docService: DocumentService,
) { }

public resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Document> {
this.docService.getDocument(route.params.workspaceId,route.params.documentId)
  .subscribe(d => {
    console.log('Document received, waiting for components to load?', d);
    this.docService.documentRecieved(d);
  }
);
 return this.docService.recievedDocument$;
 }
}

documentService

@Injectable()
export class DocumentService {
  private …

每当导航发生时，我想显示一个微调框。如何全局监听路由器事件，以便NavigationStart在NavigationEnd发生路由时可以显示Spinner 并隐藏它，就像我们如何处理HttpInterceptor全局拦截请求一样。

请给我一些建议。