标签: angular2-routing

我正在开发一个需要根据某些外部数据源配置路由的应用程序.应用程序的生命周期如下所示:

• ng2 inits with App
• 应用程序包含页眉,路由器插座和页脚
• 默认路由配置为homeComponent
• homeComponent有categoriesListComponent
• categoriesListComponent从categoriesService调用get方法
• categoriesService从api中获取类别列表
• categoriesComponent呈现列表并通过routesConfigurator将每个类别的新路由注入App

_{实际上有一个带有routesService的另一层抽象,但这个例子不需要}

该部分工作,因为我们从主页开始,进行API调用并routerConfigs为每个类别创建.因此,当用户单击某个类别时,路径已经配置了正确的categoryComponent+,metadata并且它们会显示正确的信息.

但是,如果直接访问某个特定的类别页面,那么ng2还没有routerConfigfor the route,因为API调用还没有返回任何内容,更不用说了.Ng2只是使用Header,Footer和一个空路由器来呈现基本应用程序.

我能想到的唯一解决方案就是"hacky".将缓存的json文件保存在应用服务器上并在初始html中加载,然后将其注入ng2 bootstrap/init中的服务.这样,在ng2甚至生物之前配置路线以呈现页面.

我要求任何其他可能的建议,也许有一些我可以接受的更多ng2经验的人.也许这已经解决了,我还没有完善我的google-fu.

提前致谢.

我的项目中有一个AccessGuard类,它的工作是确定用户是否可以访问该路由.我使用了router.url获取当前路线但是url在导航到新路线之前返回路线,就像我在用户路线中一样,我点击候选路线,所以url返回用户而不是我想要验证访问权限的候选人到路线这是我的路线档案:

const routes:Routes = [
{
    path:'',
    component:PanelComponent,
    canActivate:[AuthGuard,AccessGuard],
    canActivateChild:[AuthGuard,AccessGuard],
    children:[
        {
            path:'dashboard',
            component:DashboardComponent
        },
        {
            path:'users',
            component:UsersComponent
        },
        {
            path:'users/:id',
            component:ShowUserComponent
        },
        {
            path:'candidates',
            component:CandidatesComponent
        },
        {
            path:'permissions',
            component:PermissionsComponent
        },
        {
            path:'holidays',
            component:HolidaysComponent
        },
        {
            path:'candidate/:id',
            component:CandidateComponent
        },
        {
            path:'salary/create',
            component:InsertSalaryComponent
        },
        {
            path:'document/create',
            component:InsertDocumentComponent
        },
        {
            path:'leave/create',
            component:InsertLeaveComponent
        }
    ]
}

];

这是我的门卫:

permissions;
currentRoute;
constructor(private authService:AuthService,private router:Router){
    this.permissions = this.authService.getPermissions();
}

canActivate(){
    return this.checkHavePermission();
}

canActivateChild(){
    console.log(this.router.url);
    return this.checkHavePermission();
}

private checkHavePermission(){
    switch (this.router.url) { …

尝试处理OAuth登录场景,如果用户登陆authorization_code查询字符串中的页面,我们处理令牌并继续,或者如果他们没有那个登陆页面,我们检查本地存储是否有他们现有的令牌,确保它仍然是有效,并根据其有效性重定向登录或继续.

问题是,在我们检查authorization_code查询字符串参数是否存在的情况下,订阅会触发两次.第一次它是空的,第二次它在字典中具有正确的值.

app.component.ts

export class App implements OnInit {
    constructor(private _router: ActivatedRoute) {
    }

    public ngOnInit(): void {
        console.log('INIT');
        this._route.queryParams.subscribe(params => {
            console.log(params);
        });
    }
}

此代码输出:

Plunker(你需要将它弹出到一个新窗口并添加一个查询字符串?test=test).

问题

1. 有两件事我做错了两次火吗？
2. 我不能只用条件忽略空对象,因为这是我们需要验证现有身份验证令牌的场景 - 是否有另一种方法来处理这不是一个完整的黑客攻击？

矩阵url表示法是创建带参数的URL的"默认",还是更好地使用"旧"表示法？和&.我对angular.io文档没有理解

localhost:3000/heroes;id=15;foo=foo

要么

localhost:3000/heroes?id=15&foo=foo

我设置的路线如下

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login TTX'
    }
  },
  {
    path: 'list',
    component: ListingComponent,
    data: {
      title: ' TTX Home Page',
      module:'list'
    }
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
];

现在,当我来'/list' 路线然后'listing.component.ts'我写下面的代码

export class ListingComponent {

  public constructor(private router:Router) {
      //here how i can get **data** of **list** routes

  }
}

我可以使用一些建议如何解决我面临的这个问题.为了向您解释这一点,我创建了一个主要组件:

@Component({
selector: 'main-component',
providers: [...FORM_PROVIDERS, MainService, MainQuoteComponent],
directives: [...ROUTER_DIRECTIVES, CORE_DIRECTIVES, RouterOutlet, MainQuoteComponent ],
styles: [`
    agent {
        display: block;
    }
`],
pipes: [],
template: `
   **Html hidden**
  `,
  bindings: [MainService],
})

@RouteConfig([
    { path: '/', name: 'Main', component: MainMenuComponent, useAsDefault: true },
    { path: '/passenger', name: 'Passenger', component: PassengerComponent },
])

@Injectable()
export class MainComponent {

bookingNumber: string;
reservation: Reservation;
profile: any;

constructor(params: RouteParams, public mainService: MainService) {

    this.bookingNumber = params.get("id");

     this.mainService.getReservation(this.bookingNumber).subscribe((reservation) => {

        this.reservation = reservation;
    });

    this.profile …

我的应用程序已启动并运行Angular 2.1.0.路由受路由器保护,canActivate保护.

当将浏览器指向受保护的区域(如"localhost:8080/customers")时,我会像预期的那样重定向到我的登录页面.

但是在成功登录后,我希望被重定向回调用URL(在这种情况下为"/ customers").

处理登录的代码如下所示

login(event, username, password) {
  event.preventDefault();
  var success = this.loginService.login(username, password);
  if (success) {
    console.log(this.router);
    this.router.navigate(['']);
  } else {
    console.log("Login failed, display error to user");
  }
}

问题是,我不知道如何从login方法中获取调用url.

我确实找到了一个关于这个的问题(和答案),但是对它没有任何意义. 登录后Angular2重定向

例如,我在路上/cars?type=coupe,我想用其他查询参数导航到同一个端点(但保留现有的查询参数).我正在尝试这样的事情

<a [routerLink]="['/cars']" [queryParams]="{model: 'renault'}" preserveQueryParams>Click</a>

保留初始查询参数(type = cars)但忽略添加的(model = renault).这是预期/正确的行为还是某种错误？看起来preserveQueryParams优先于queryParams？还有其他顺利解决方案吗？

我创建了两个关于路由的loadChildren和outlet导航问题的掠夺者.出于某种原因,在加载的子模块中具有空基本路径不适用于出口导航.

在此示例中,按"联系人"链接失败.

APP-routing.module

const appRoutes: Routes = [
  { path: 'admin', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admin', pathMatch: 'full' }
];

管理员-routing.module

const adminRoutes: Routes = [
{ 
  path: '', 
  component: AdminComponent,
  children: [ 
    {
      path: 'compose',
      component: ComposeMessageComponent,
      outlet: 'popup'
    }
  ]
}];

在此示例中,按"联系人"链接可以正常工作.

APP-routing.module

const appRoutes: Routes = [
  { path: 'admi', loadChildren: () => AdminModule },
  { path: '',   redirectTo: '/admi/n', pathMatch: 'full' }
];

管理员-routing.module

const adminRoutes: Routes …

我正在编写一个应用程序,其中所有功能都有自己的模块(功能可以是页面,也可以是页面的一部分).这是因为我们希望所有功能都拥有自己的域逻辑,服务,指令和组件,即在仪表板模块中我们得到了一个ChartComponent小部件,我不想将其暴露给其他视图,如登录或配置文件.

问题是当在Angular 2中使用路由时,您总是路由到特定组件,而不是模块.

在我们的例子中,为路径设置路径:'/ dashboard'组件:DashboardComponent我们需要在app.module.ts中声明DashboardComponent,这没关系,但是因为我们仍然在模块app.module中我们的CharComponent是因为它是在dashboard.module.ts而不是app.module.ts中声明的,所以我们的DashboardComponent中没有公开并且不会渲染.

如果我们在app.module.ts中声明ChartComponent它应该正常工作但我们失去了应用程序的架构.

应用程序的文件结构如下:

?? src/
   ?? app/
      ?? app.module.ts
      ?? app.component.ts
      ?? app.routing.ts
      ?? profile/
      |  ?? profile.module.ts
      |  ?? profile.component.ts
      ?? login/
      |  ?? login.module.ts
      |  ?? login.component.ts
      ?? dashboard/
         ?? dashboard.module.ts
         ?? dashboard.component.ts
            ?? chart/
               ?? chart.component.ts