标签: angular-routing

我希望在我的主应用程序中有一个路由模块，并在单独的模块中包含路由，例如：

app\n - modules\n   -my-module\n      my-routing.module.ts\n app-routing.module.ts\n

主要路由模块有：

const routes: Routes = [\n  { path: \'\', pathMatch: \'full\', redirectTo: \'view-container\' },\n  { path: \'view-container\', component: ViewContainerComponent },\n  { path: \xc2\xa0\'**\', component: ViewContainerComponent }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(routes, { enableTracing: true })],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n

子模块的路由是：

const routes: Routes = [\n  { path: \'view-detail\', component: CompADetailComponent }\n];\n\n@NgModule({\n  imports: [\n    CommonModule,\n    RouterModule.forChild(routes)\n  ],\n  declarations: []\n})\nexport class MyRoutingModule { }\n

我的 ViewContainer 组件有一个指向“查看详细信息”的 routerLink。

<a …

我有一个主要的app.routing.module.ts：

 const routes: Routes = [
  { path: 'home',  component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes),
  ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

然后是几个子路由模块：

const routes: Routes = [
    { path: 'AbcRoute1', component: AbcRoute1Component },
    { path: 'AbcRoute2', component: AbcRoute2Component }
];

@NgModule({
    imports: [ RouterModule.forChild(routes) ],
    exports: [ RouterModule ]
})
export class AbcRoutingModule {}

const routes: Routes = …

我正在构建一个 angular 5 应用程序，但在玩路线时遇到了麻烦......

我有 2 个主布局，每个布局都有如下子路由：

SiteLayoutComponent - HomeComponent AppLayoutComponent - ContactComponent

我的问题是默认路由，当应用程序第一次加载时，使用空 URL，路由器必须重定向到 Home 组件，它有子路由“SiteLayoutComponent”，这里的问题是它只加载了 HomeComponent 但不是具有<navbar-component>. 它仅在浏览器中输入 /home 时有效。以下是我的路线：

const appRoutes: Routes = [

{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
},
//Site routes goes here        
{
    path: 'home',
    component: SiteLayoutComponent,
    children: [
        { 
            path: '', 
            component: HomeComponent 
        }
    ]
},
//App routes goes here
{
    path: 'app',
    component: AppLayoutComponent,
    children: [
        { path: 'contact', component: ContactComponent }
    ]
},
//No layout routes    
{
    path: …

我在网址栏中输入了一个链接。

http://localhost:4200/reset-password-action/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9/5

我想从 url获取eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9和5。

我在app-routing.module.ts文件中有它。

const routes: Routes = [
  { path: 'reset-password-action/:token/:user_id', component: NewPasswordComponent }
];

我需要一个简单的语法来获取这些数据。

我试图removeEventListener在我的角度组件中： Javascript removeEventListener 不工作

    ...
    ngOnInit() {
        document.addEventListener('visibilitychange', () =>this.handleVisibleState(), true);
    }

    ngOnDestroy() {
        document.removeEventListener('visibilitychange', () => this.handleVisibleState(), true);
    }

    handleVisibleState() {
        let vis = document.visibilityState === 'visible';
        this.configsService.update_collab_visible(vis);
    }
    ...

addEventListener即使在上述作品之后ngOnDestroy ()

如何从角度组件中的文档解除可见性状态？

尝试 2

    private visibilityChangeCallback: () => void;

    ngOnInit() {
        this.visibilityChangeCallback = () => this.handleVisibleState();
        document.addEventListener('visibilitychange', this.handleVisibleState, true);
    }

    ngOnDestroy() {
        document.removeEventListener('visibilitychange', this.handleVisibleState, true);
    }

    handleVisibleState() {
        let vis = document.visibilityState === 'visible';
        console.log(typeof this.configsService); // undefined
        this.configsService.update_collab_visible(vis);
    }

结果：

错误类型错误：无法读取未定义的属性“update_collab_visible”

我已经创建了 HTTP_INTERCEPTOR，我需要它来处理一些特定的路由，而另一些则不需要。

一开始它在主应用程序模块文件中，然后我从那里删除它并将它添加到一些模块中，但它仍然适用于所有路由，然后我将它添加到 component.ts 中但根本不起作用。

{
            provide: HTTP_INTERCEPTORS,
            useClass: AuthExpiredInterceptor,
            multi: true,
            deps: [Injector]
},

我尝试了三种方法。

第一个：index.html

<base href="/customer">

第二个：app.module.ts

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/customer'}]
})

第三个：app-routing.module.ts

const routes: Routes = [
  { path: "", redirectTo: "/customer", pathMatch: "full" },
  {
    path: "customer",
    component: CustomerComponent,
    data: { animation: "HomePage" }
  }
];

以上所有方法都适用于 URL 路由，我得到了所需的 URL。

http://localhost:4200/客户

但是，静态文件（js 和图像）仍在使用基本路径“ http://localhost:4200/ ”加载。我需要它像http://localhost:4200/customer/main.js 一样。

因此，出于某些安全验证原因，我试图将其设为http://localhost:4200/customer/main.js而不是http://localhost:4200/main.js。

同样可以在下面的屏幕截图中看到。

我想从一个 html 页面使用 routerLink 和 state 路由到另一个页面。使用标记没有问题，在登录页面的 ngOnInit 期间，我可以按预期检索状态。使用标签主页也可以导航，但状态结果未定义。

我怎么了？

登录页面的html

<button routerLink="/home" [state]="navExtra.state">
    Go Home Page via button
</button>
<a routerLink="/home" [state]="navExtra.state">Go Home Page via a</a>

登录页面的ts

import { Component, OnInit } from '@angular/core';
import { NavigationExtras } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
  navExtra: NavigationExtras = {
    state: { data: { a: 'a', b: 'b' } }
  };
  constructor() {}

  ngOnInit() {}
}

首页的ts

import { Component, OnInit …

我有这些路线

应用路由

{
   path: 'user',
   canLoad: [AuthGuard],
   loadChildren: () =>
   import('./user/user.module').then((m) => m.PublicUserModule)
}

用户路由

{
    path: '',
    component: PublicUserPageComponent,
    canActivate: [UserPhonesCheckGuard],
    children: [
      /*{
        path: '',
        pathMatch: 'full',
        redirectTo: 'check'
      },*/
      {
        path: 'account',
        loadChildren: () =>
          import('./account/user-account.module').then(
            (m) => m.PublicUserAccountModule
          )
      },
      {
        path: 'check',
        loadChildren: () =>
          import('./check/user-check.module').then(
            (m) => m.PublicUserCheckModule
          )
      }
    ]
  }

根据某些条件使用 UserPhonesCheckGuard 我想重定向或检查或帐户子路由，但使用

canActivate() 
    return this.router.parseUrl('/user/check');
  }

浏览器发疯了:(

我应该使用什么路径？

这是在我的 routing.module 中：

{path: 'hero' component: HeroComponent}

这就是我通过路由传递对象的方式：

this.router.createUrlTree(['/hero', {my_object: this.Obj}]));
window.open(url, '_blank');

在我的英雄组件中，我读取对象如下：

this.route.snapshot.paramMap.get('my_object');

console.log(this.route.snapshot.paramMap.get('my_object');) 返回：

[Object object]

并读取对象的属性，例如.id返回：

undefined

如果我尝试使用它进行迭代，*ngFor我会得到：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

为什么会这样？