标签: angular-routing

我正在阅读此处的 NG2 教程，但遇到了障碍。

当我尝试将我的文件导入AppRoutingModule到我的文件中时app.module.ts，出现“ Cannot find module \'./app-routing.module\”错误。我在这里看到了这篇文章以及其他解决方案，但它们似乎都与 相关systemjs，但不相关 webpack。

这是我的package.json：

{\n  "name": "heroes",\n  "version": "0.0.0",\n  "license": "MIT",\n  "angular-cli": {},\n  "scripts": {\n    "start": "ng serve",\n    "lint": "tslint \\"src/**/*.ts\\"",\n    "test": "ng test",\n    "pree2e": "webdriver-manager update",\n    "e2e": "protractor"\n  },\n  "private": true,\n  "dependencies": {\n    "@angular/common": "2.0.0",\n    "@angular/compiler": "2.0.0",\n    "@angular/core": "2.0.0",\n    "@angular/forms": "2.0.0",\n    "@angular/http": "2.0.0",\n    "@angular/platform-browser": "2.0.0",\n    "@angular/platform-browser-dynamic": "2.0.0",\n    "@angular/router": "3.0.0",\n    "angular2-in-memory-web-api": "0.0.21",\n    "core-js": "^2.4.1",\n    "rxjs": …

Angular 2 有没有办法获取这种 URL？

http://example.com/the-route?param[]=value1&param[]=value2&param[]=value3

我试图像应该那样使用queryParams，Router但由于 queryParams 接受一个对象，所以我不能这样做：

this.router.navigate(['/the-route'], queryParams: { 'param[]': 'value1', 'param[]': 'value2', 'param[]': 'value3' });

因为，当然，我不能param[]在对象中多次使用相同的名称（）

我正在努力解决如何做到这一点，但找不到方法

我看过这篇文章： Angular 2 pass array to router queryString。但没有正确答案

在我的 Angular (v4) 应用程序中，我正在尝试创建一个面包屑模块​​。我发现这个问题很有帮助，建议我data像这样将面包屑信息存储在路由器的属性中

{ path: '', component: HomeComponent, data: {breadcrumb: 'home'}}

但是我想做的是在 data 属性中存储一个组件，然后让面包屑模块​​提取并呈现它。允许我像这样与面包屑模块​​交互

{ path: '', component: HomeComponent, data: {breadcrumb: CustomViewComponent}}

按照 angular Dynamic Component Loader 指南和有用的博客文章，我尝试让我的面包屑渲染组件执行以下操作：

import { Component, Input, OnInit, AfterViewInit,
  ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';

import { MainLogoComponent } from '../my-material/main-logo/main-logo.component';

@Component({
  selector: 'app-breadcrumbs',
  template: `<div #parent></div>`,
  styleUrls: ['./breadcrumbs.component.scss']
})    
export class BreadcrumbsComponent implements OnInit, …

我试图找出为什么下面的 router.navigate(['']) 代码不将用户带到登录组件。我只停留在家庭组件上。当我添加调试器时；从代码来看，它似乎进入了某种无限循环。

流程如下： 由于 Route Guard 失败，用户来到站点并立即被重定向到 /login。如果他们登录，Route Guard 就会通过并转到 [' ']，即 HomeComponent。然后，当他们单击注销时，我认为导航到 [' '] 应该会失败，只需转到 /login。由于某种原因，它停留在 HomeComponent 上并且从不导航。

home.component.ts

  logout() {
    this.userService.logout();
    this.router.navigate(['']);
  }

用户服务.ts

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;
    return this.verifyLogin(url);
  }

  verifyLogin(url: string): boolean {
    if (this.userLoggedIn) { return true; }

    this.router.navigate(['/login']);
    return false;
  }

  logout() {
    this.userLoggedIn = false;
  }

应用程序路由.module.ts

const routes: Routes = [
    { path: '' , component: HomeComponent, canActivate: [UserService]},
    { path: 'login', component: LoginComponent …

我想创建一个子元素来触发它自己的点击，并且不响应具有 [routerLink] 的父元素，问题是子元素无法delete()在其中运行它的功能(click)="delete()"，只需跟随它的父元素[routerLink]（它导航到/产品/：id）

    <div class="item">

<!-- parent element -->
    <a [routerLink]="['/product/'+product.id]">
        <div class="figure">
          <div class="sides">
            <div class="side">
              <div class="card">
<img class="img" [src]="product.thumb"> 
                <div class="content">
                  <div class="header">{{product.name}}</div>
                  <div class="meta"> <span>product.category</span> </div>
                </div>
                <div class="extraContent"> <span class="ui right floated black">

                <!-- child element -->
                <a (click)="delete()" ><i class="red trash outline icon"></i></a></span> <span><i class="deleteProductIcon"></i></span> </div> 
                <!-- child element -->

              </div>
            </div>
          </div>
        </div>
      </a>
<!-- parent element -->

</div>

我尝试移动[routerLink]到鞋面div，但它仍然做同样的行为

出于好奇，我尝试将ActivatedRoute的 param 分配给定义为数字的变量：

public id: number;

constructor(public activatedRoute: ActivatedRouter) {}

public ngOnInit() {
    this.activatedRoute.params.take(1).subscribe((params) => {
        this.id = params['id']; // I was expecting to see a warning here
    }
}

...并且它在我的 IDE 和 tslint 中没有任何警告地通过了。所以我深入研究它并发现它发出声明的参数（此处）以包含any元素：

export type Params = {
  [key: string]: any
};

问题是为什么？AFAIK 所有参数始终是字符串。有没有办法让 Angular 知道我们的一些参数应该是numberorarray并且它会解析它？

我正在使用 TypeScript 学习 Angular JS。我有 Angular JS 的经验。但当它与 TypeScript 集成时，对我来说是全新的。我现在正在为我的应用程序配置路由。

This is my app.module.ts file\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { NgModule } from \'@angular/core\';\nimport { FormsModule } from \'@angular/forms\';\nimport { HttpModule } from \'@angular/http\';\n\nimport { AppComponent } from \'./app.component\';\nimport { HomeComponent } from \'./home/home.component\';\nimport { DirectoryComponent } from \'./directory/directory.component\';\n//import { AppRoutingModule }  from \'./app-routing.module\';\n\n\n\nimport { RouterModule, Routes } from \'@angular/router\';\n\n\n\nconst routes: Routes = [\n{\n  path: \'\',\n  component: HomeComponent\n},\n{\n  path : \'directory\',\n  component : DirectoryComponent\n}\n];\n\n\n\n@NgModule({\n  declarations: [\n  AppComponent,\n  HomeComponent,\n …

所有关于 Angular 错误的帮助文章都说要确保已注入“路由器”，如下所示：

构造函数（路由器：路由器......

我已经做到了。

我不确定还能做什么。在开始对路由进行故障排除之前，我必须解决这个问题。

我的目标：允许用户导航到子路线。允许用户单击时关闭当前路线。

因此当前地址为： https://localhost:4200/layout/usermanagement/(newuser:newuser/(newuserinput:newuserinput))

单击后，我将被路由到： https://localhost:4200/layout/usermanagement/(newuser:newuser/(newuserorginfo:newuserorginfo))

另外，单击另一个按钮后，我将被路由到： https://localhost:4200/layout/usermanagement/(newuser:newuser))

这是我的组件、模块和模板。

组件 new-user-input.component.ts

import { Component, OnInit } from '@angular/core';
import { slideToRight } from '../../../../router.animations';
import { Router, ActivatedRoute, UrlSegment } from '@angular/router';

@Component({
  selector: 'app-new-user-input',
  templateUrl: './new-user-input.component.html',
  styleUrls: ['./new-user-input.component.css'],
  animations: [slideToRight()]
})
export class NewUserInputComponent implements OnInit {
  router: Router;

  constructor(router: Router, r: ActivatedRoute) {
    r.url.subscribe((s: UrlSegment[]) => {
      console.log("url", s); //https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab
    });
  }

  ngOnInit() {
  }

  displaySibling() {
    console.log(this.router);
    this.router.navigate(['../', { outlets: { newuserorginfo: …

我有一个带有路由和延迟加载模块的 Angular 6 应用程序。AppModule 有一个路由配置，其中包含两个延迟加载的路由，例如 AModule 和 BModule。

我们为生产和开发配置了不同的 angular-cli 环境。

在 BModule 的开发过程中，我希望 BModule 可作为我们的开发服务器上的路由，但不能在我们的生产服务器上。

因此，我们使用 angular-cli 环境 dev 构建应用程序的开发版本，而生产版本则使用环境 prod 构建。

因此，现在和将来，通常会有一个 prod 的路由配置和一个 dev 的路由配置，这是 prod 配置的超集。

所以我所做的是创建了两个路由配置：

export const prodRoutes: Routes = [
  { path: 'a-module', loadChildren: `app/a-module/a.module#AModule` },
];

export const devRoutes: Routes = [
  { path: 'b-module', loadChildren: `app/b-module/b.module#BModule` },
];

对于产品，我只需使用变量prodRoutes进行路由配置。效果很好。

对于开发配置，我将路由设置为[...devRoutes, ...prodRoutes]. 那不能正常工作。Angular 似乎不理解合并路由配置。

有没有办法将多个路由阵列合并到单个工作路由配置中？

例子

http://localhost:4200/login?aUasas129198

决心

http://localhost:4200/login

如果我想要'?'后面的值该怎么办？

我尝试做

{ path: 'login/:id', component: LoginComponent },

但没有成功

我也尝试过

console.log(this.route.snapshot.queryParams);
console.log(this.route.snapshot.params);

但它们都返回空对象。我现在该怎么办请帮忙