Question

我是angular4的新手。我想尝试路线。我的问题是组件有动态appName会像下面一样。

localhost:4200/dynamic-name/login.

这里我需要在点击任何组件之前检查某些服务上是否存在动态名称。这意味着我需要在转到页面之前在路由器模块上进行检查。如果存在允许路由器到达登录组件。否则，重定向到某个默认组件。如果存在，我需要在路由链接上保留这个动态名称。

请指导我。

Answer 1

您可以动态设置APP_BASE_HREF。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';

import { AppComponent } from './';
import { getBaseLocation } from './service/baselocation.service';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpModule,
  ],
  bootstrap: [AppComponent],
  providers: [
    appRoutingProviders,
    {
        provide: APP_BASE_HREF,
        useFactory: getBaseLocation
    },
  ]
})
export class AppModule { }

在./service/baselocation.service，

export function getBaseLocation() {
     var basePath = "your dynamical base path" //add logic to get your base path
    return '/' + basePath;
}

另一种方法是让用户点击＆＃34; / logn＆＃34; route，然后使用AuthGuard重定向到动态登录路由。

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

    var path=YourPathService.getPath();

     this.router.navigate(['/' + path + '/login']);

     return false;

  }
}

export const ROUTES: Routes = [
  {path: 'login', component: LoginComponent, canActivate: [AuthGuard]},
  {path: 'path1/login', Path1LoginComponent },
  {path: 'path2/login', Path1LoginComponent }
];

Angular 4 Router'：any / component'

1 个答案: