标签: angular2-routing

const routes: Routes = [
    {
        path: 'somepath',
        component: SomeComponent,
        data: {
            showSidebar: true,
            title: 'test'
        }
    },
    {
        path: 'somepath2',
        component: SomeComponent2,
        data: {
            showSidebar: false,
            title: 'test2'
        }
    }
];

如何从当前激活的路线访问数据对象？如果我当前的路由是 localhost:4200/app/somepath2 那么我想访问数据： { showSidebar: false, title: 'test2' }

据我了解， Angular2 中的CanActivate接口仅对路由更改有效。因此，如果我有一个页面p需要用户登录，我可以创建一个实现 CanActivate 接口的防护，该接口将允许RouterModule仅在用户登录时激活p 。

但是当p处于活动状态并且用户注销时会发生什么？我试图找到检查是否允许页面处于活动状态而不更改 RouterModule 中的路由的最佳实践，但我找不到任何有用的东西。假设页面p处于活动状态并且需要登录。现在，当 p 处于活动状态时，会以某种方式触发注销，但不涉及路由更改。假设服务器响应 401，并且应用程序注意到用户不再登录。检查活动页面是否需要登录并采取相应措施的最佳做法是什么？活动页面可能不需要登录。在这种情况下，一切都应该保持原样。

根据各种情况，routeConfig可能为空，也可能有效。我试图弄清楚为什么或何时它有效，何时无效。我想用它来动态加载，但我不能依赖它，因为它并不总是有效。迄今为止，

export class HomeComponent implements OnInit {
  constructor(
    private activatedRoute: ActivatedRoute
  ) {
  }
  ngOnInit(): void {
        console.log('route config', this.activatedRoute.routeConfig);
  }
}

我的路线模块（根据请求）

const routes: Routes = [
  { path: 'home', component: HomeComponent},
  { path: '', redirectTo: 'home', pathMatch: 'full' },
]
const config: ExtraOptions = {
  useHash: true,
};
@NgModule({
  imports: [
    RouterModule.forRoot(routes, config),
  ],
  exports: [
    RouterModule,
  ],
  declarations: [
  ]
})
export class RoutingModule {
}

我目前正在开发一个项目，我们的首席架构师希望在运行时动态加载角度应用程序中的不同“兄弟”应用程序。我已经知道如何使用具有延迟加载的模块来完成此操作。但在我们的例子中，应用程序也单独存在于它们自己的环境中。有人对如何以有角度的方式实现这一目标有建议吗？

我已经尝试将它们分成自己的块并像这样加载它们，并且它部分起作用。但“主”应用程序需要了解同级应用程序，因此需要对其进行调整以延迟加载模块。

我主要好奇其他人在此类场景中使用的解决方案:)

如何在 Angular 路由中使用带有正斜杠的路径？

在 Hero 教程的基础上，我有：

{ path: 'detail/:path', component: HeroDetailComponent },

路径应该是动态的。它可以像

a/b
a/b/c
a/d/e/f

等等。关键是我不知道路径有多深，也不知道各个路径部分的名称。

在 HTML 中它的用法如下

<a routerLink="/detail/{{hero.path}}">
   {{hero.path}}
</a>

错误是

Error: Cannot match any routes.

最终目标是 Angular 服务在向服务器发出请求时使用路径作为 URL 查询参数。

我已经在 routerLink 中尝试了几个硬编码值，以确保如果我只是传递一个不带任何正斜杠的值，则代码可以正常工作。

我在这里尝试了建议，但没有成功：Forward Slash in Angular RouteParameters

我发现https://github.com/angular/angular/issues/10570似乎描述了我的问题，并声称它已于 2016 年修复。其他一些人声称它在 2017 年不起作用。

如果有人能指出我正确的方向，我会很高兴。谢谢！

我对 Angular 5 完全陌生，我想在应用程序打开时显示登录页面。

现在我显示 appComponent，它有工具栏和侧面导航栏。但是当用户加载应用程序时，如果登录成功，我想显示登录屏幕，那么只有用户应该允许查看主页。

如果我将我的应用程序组件作为登录组件，我无法根据用户的菜单选择在主页中加载不同的组件。

应用程序组件.html

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav class="app-sidenav">
        <mat-nav-list>
            <a mat-list-item routerLink="/home" routerLinkActive="active-list-item">
                <h2 matLine>Home</h2>
                <mat-icon matListIcon>home</mat-icon>
            </a>
            <a mat-list-item routerLink="/account" routerLinkActive="active-list-item">
                <h2 matLine>Account</h2>
                <mat-icon matListIcon>person</mat-icon>
            </a>
            <a mat-list-item routerLink="/settings" routerLinkActive="active-list-item">
                <h2 matLine>Settings</h2>
                <mat-icon matListIcon>settings</mat-icon>
            </a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <mat-toolbar color="primary" class="mat-elevation-z3">
            <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
      My App
    </mat-toolbar>
    <div class="app-content">
      <router-outlet></router-outlet>  // router-outlet
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

目前，当我运行应用程序时，正在加载此页面。我想显示全屏登录页面，而不是首先显示主页。

const  routings: Routes = [
    {path:'',redirectTo:'/app-root',pathMatch:'full'},
    {path:'home',component:HomeComponent},
    {path:'account',component:AccountComponent},
    {path:'settings',component:SettingsComponent},
    {path:'**',redirectTo:'/app-root',pathMatch:'full'},
];

目前，当 url 为 ' ' …

我不知道为什么，但它突然停止工作......这import是正确的，但它看不到navigate()方法......有什么想法吗？
每个答案都与缺失有关，import但这里有一个正确的答案import。navigate()我的代码的每个部分都停止工作了，哈哈，这只是这里的例子。有任何想法吗？

import { Injectable } from '@angular/core';

import { Actions, Effect, ofType } from '@ngrx/effects';
import * as  AuthActions from './auth.actions'
import * as UserDetailsActions from '../user/user-store/user.actions';
import * as StudentActions from '../../student/student-store/student.actions';

import { map, mergeMap, switchMap, switchMapTo, concatMapTo, withLatestFrom } from 'rxjs/operators';

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

@Injectable()
export class AuthEffects {
    constructor(private actions$: Actions,
                private router: Router) { }

    @Effect()
    authSignin = this.actions$
        .pipe(
            ofType(AuthActions.TRY_SIGNIN), …

我的应用程序中有路由，其中​​第一个参数不是专用的。这取决于我的应用程序有哪些语言

const routes: Routes = [
  {
    path: ':lang',
    component: MainComponent,
    children: [
      {
        path: '',
        loadChildren: './modules/home/home.module#HomeModule',
      },
          {
        path: 'offers',
        loadChildren: './modules/offers/offers.module#OffersModule',
      },
      {
        path: 'blog',
        loadChildren: './modules/blog/blog.module#BlogModule',
      },
    ]
 }
]

我可以在这里进行验证，如果用户输入错误的网址，它将重定向到 404 页面吗？

例如，domain.com/en/blog是有效的网址，但domain.com/anotherurl不是。

我正在使用 Angular 7 版本

我有一个 MuscleComponent，其中有 MuscleAddComponent 和 MuscleEditComponent 作为其子组件。当我单击子组件时，我试图重定向到它们，但它们却出现在 MuscleComponent 的同一视图上。

注意：当我{ path: '', component: MusclesComponent, pathMatch: 'full' },在肌肉路径的子级中时，我在同一页面上得到两个相同外观的 MuscleComponent 的 html。为什么会这样呢？为什么当我单击“添加”按钮时，它会在 MuscleComponent 的 html 上显示 MuscleAddComponent 的内容？

应用程序路由.module.ts

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  {
    path: 'muscles', component: MusclesComponent, children: [
      { path: '', component: MusclesComponent, pathMatch: 'full' },
      { path: 'add', component: MuscleAddComponent },
      { path: ':id', component: MuscleEditComponent }
    ]
  },
  { path: 'workouts', component: WorkoutsComponent },
  { path: 'myplanner', component: …

我将我的第一个 Angular 项目上传到生产环境。此处提供的网站：http://urigross.com 当我在地址字段中输入“urigross.com”时，该网站工作正常。当我刷新页面时，我收到一条错误消息。当我在地址字段中输入确切的路线（例如“www.urigross.com/heb/about”）时，也会发生这种情况。我尝试的每条路线都会发生这种情况。错误信息是：

“未找到 在此服务器上未找到请求的 URL。

此外，尝试使用 ErrorDocument 处理请求时遇到 404 Not Found 错误。”

我尝试联系站点支持，他们告诉我，我的角度路由可能配置不正确。该网站可以在我的电脑上使用“ng s”命令在本地完美运行。我尝试在 stackoverflow 上搜索，但结果是 php 而不是 Angular 项目。

我的路由代码：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from 'src/app/components/home/home.component';
import { AboutComponent } from 'src/app/components/about/about.component';
import { ContactComponent } from 'src/app/components/contact/contact.component';
import { Page404Component } from 'src/app/components/page404/page404.component';
import { PlywoodHomeComponent } from 'src/app/components/plywood/plywood-home/plywood-home.component';
import { MdfHomeComponent } from 'src/app/components/mdf/mdf-home/mdf-home.component';
import { TegoHomeComponent } from …