标签: angular-routing

目前我有一个 Angular 2 组件，它被降级为指令并用于引导式混合 Angular1/Angular2 应用程序。在浏览器中加载组件时遇到问题，出现以下错误：

没有 ActivatedRoute 的提供者！

注意：以下，ActivatedRoute 的无提供者 - Angular 2 RC5不涵盖此用例。

这个应用程序仍然使用来自引导的 Angular 1 应用程序的所有路由，并且到目前为止工作得很好；此时我还没有将路由转换为使用 Angular 2 路由。我在构建的新组件中的要求之一是检查查询参数。这可以通过以下代码完成：

import { ActivatedRoute } from '@angular/router';

constructor(
        private route: ActivatedRoute)

route.queryParams.subscribe(
    data => this.Id = data['Id']);

我认为的问题在于，上面的代码依赖于 Angular2 路由器，正如我所提到的，它还没有在我的混合引导应用程序中使用。所以这是我的问题：

• 我可以在不使用 Angular2 路由器的情况下使用上面的代码并仍然检查查询字符串参数吗？用于$routeParams获取查询字符串信息的原始 Angular1 控制器。这在我的新 Angular2 组件中不受支持。如果上面的答案是我无法使用，ActivatedRoute因为我没有使用 Angular2 路由器，我应该尝试使用这种旧方法还是使用另一种方法；我需要做的就是检查组件中的路由参数？

在我的 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, …

当用户到达我的应用程序中受特殊保护的路由时，我将他重定向到登录路由，以执行身份验证。

但是，在成功验证后，我不想将她重定向回她最初到达的路线。

如何在 Angular 中保留中间路由状态然后重定向到它？

通过路由状态，我的意思是：

• 路线本身，即路径
• 所有查询字符串参数
• 一个哈希字符串

angular(v 4.1.1) 路由器是否canActivate具有多个功能

{
   path: '',
   component: SomeComponent,
   canActivate: [guard1, guard2, ...]
}

这样的事情应该工作吗？如果不是，如果它假设只带一名警卫，他们为什么会在列表中

因为我有类似的东西，即使guard1返回false，guard2仍然会被执行。

提前致谢

角 4.1.1

嗨，所以我已经用这样的 id 声明了我的路线，{path: 'spreadsheet/:id', component: ContactParent}所以在这里我可以id通过使用ActivatedRoute但我如何获得spreadsheet，如果我这样做this.router.url会给我spreadsheet/20但我只需要spreadsheet

如何可能检查子路由器是否活动，在 angular 4 中显示状态真或假，
现在我使用：/* @angular/cli: 1.4.4 node: 8.6.0 typescript: 2.3.4 @angular/路由器：4.4.4 */

我的父母路线是：

const routes:Routes=[
    {
        path: '', component: SummaryOfFindingsComponent,
        children:[
            {
                path:'data-time-frame', component: DataTimeFrameComponent
            },
            {
                path:'email-address', component: EmailAddressesComponent
            },
            {
                path:'repair-orders', component: RepairOrdersComponent
            },
            {
                path:'total-records', component:TotalRecordsComponent
            },
            {
                path:'unique-households', component: UniqueHouseholdsComponent
            },
            {
                path:'unique-vins', component: UniqueVinsComponent
            }
        ]
    }
]

父组件是：

export class SummaryOfFindingsComponent implements OnInit {
    isUserSelected;
    constructor() { this.isUserSelected=false; }
    ngOnInit() { }
    isUserItemSelect(){
        this.isUserSelected=true;
    }
}

如果我的 Angular 应用程序，如果我导航（通过明确输入 URL 或单击指向它的页面链接）到http://localhost:4200/#/sign-in页面加载正常并显示我的登录表单。如果我然后Refresh在浏览器中单击，我将被带回根页面http://localhost:4200/#/。

我的路由器很简单：

export const routes: Route[] = [
  { path: 'sign-up', component: SignUpComponent},
  { path: 'sign-in', component: SignInComponent},
  { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule'},
  { path: 'dashboard', loadChildren: 'app/user/user.module#UserModule', canActivate: [ UserLoggedInGuard ]},
  { path: '', pathMatch: 'full', component: HomeComponent},
  { path: '**', pathMatch: 'full', component: PageNotFoundComponent},
]

我在用

• 视窗 8
• 铬 62
• @angular/core": "^4.2.4
• @angular/router": "^4.2.4

任何想法为什么会发生这种情况？

据我所知，它的调用签名是canActivate这样的：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

}

我有一个服务，它需要一个组件的名称并返回访问该组件所需的用户角色，以便我可以检查canActivate我的守卫功能，活动用户是否具有相应的角色。我的问题是，我不知道如何访问该组件。经过一番谷歌搜索后，我找到了这样的解决方案：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  const nameOfComponent = route.routeConfig.component.name;
  return doSomeRoleCheck(nameOfComponent);
}

但就我而言，我只是收到一个错误：“无法读取未定义的属性‘名称’”。如何访问活动路由的组件，尤其是作为字符串的名称？

编辑

我发现，我确实在父路线上检查了这个守卫。当我在子路由中检查它时，它可以工作。如何从父组件访问子组件ActivatedRouteSnapshot

我已经在我的apache服务器上成功安装并运行了Angular 2应用程序,我可以浏览页面 [routerLink]="['/register']"

但是,当我刷新页面时,我在注册页面上收到404错误.我的重写规则有问题吗:

Options +FollowSymLinks
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

这也是我的apache VirtualHost

<VirtualHost *:80>
    ServerName example.com
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/front/dist/browser
    <Directory /var/www/html/front>
        AllowOverride All
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

我正在构建一个Angular 7应用程序.在这个应用程序中,我得到了嵌套路线.我希望能够检测父路由使用的组件.我找到了一种在本地进行的方法,但这对生产无效(输出不同).

我用这个方法:

   checkIfChild() {
    this.sub = this.route.parent.params.subscribe(params => {
      if (params['id']) {
        this.parentId = params['id'];
        if (this.route.parent.component['name'] === 'ProjectShowComponent') {
          this.parentType = 'Project';
        } else if (this.route.parent.component['name'] === 'CompanyShowComponent') {
          this.parentType = 'Company';
        } else if (this.route.parent.component['name'] === 'ContactShowComponent') {
          this.parentType = 'User';
        }
      }
    });
  }

方法this.route.parent.component ['name']在本地输出名称,但在生产时只输出字母T.

我收到了这条消息

TypeError: 'arguments', 'callee', and 'caller' cannot be accessed in this context.

什么是检测父路线激活子路线的正确方法,以便我可以采取行动？