标签: angular2-routing

我遇到Angular 2的一个问题,从一个路由到另一个路由的更改不会自动滚动到新视图的顶部.我意识到Angular 1允许将一个autoscroll属性添加到HTML元素中,而其他人已经提出了一些简单的javascript(例如window.scroll(0, 0))来强制视图在加载时滚动到顶部.

但是,我不知道如何使用Angular 2完成此任务.有谁知道如何实现这一目标？

我正在尝试用另一个路由器插座内的一个路由器插座制作一个项目:

它会像这样工作:

在第一个路由器插座中,它将有两个视图:

• auth组件(/ login)

• 管理组件(/ admin)

然后在第二个出口将在admin组件内部,具有自己的路由,将呈现这些:

• 仪表板(/ admin)

• 个人资料(/ admin /个人资料)

• 用户(/ admin/users)

现在,在Angular 2文档中,我可以看到他们使用模块实现了这个实现.但我不想使用多个模块(或者我必须？).

有没有办法在不分离模块的情况下实现这个实现？

我想要管理区域的默认组件,这就是我想要第二个路由器插座的原因,例如:仪表板将具有HeaderComponent,LeftNavComponent和DashboardCompoent.但是配置文件页面也将包含所有这些HeaderComponent和LeftNavComponent,并且唯一可以改变的是ProfileComponent,因此它将具有基本相同的结构.我想我不需要为每个不同的管理页面重复每次导入.我想只有一个主要的管理组件,它将具有基于当前路由的动态内容.

我已经在互联网上尝试和搜索了很多,但我能找到的唯一例子来自官方的Angular 2文档.但他们正在实施多个模块.

我是Angular2的新手,很难理解Angular2中的导入和导出是怎么@NgModule 回事.

以下面的代码为例:

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})

在导入部分我要导入什么？ 路由器模块,或forChild()函数,或函数forChild()返回的模块？ 哪一个 ？

此外,当我RouterModule再次导出时,文档说明如下 - :

我们的最后一步是重新导出RouterModule.通过重新导出RouterModule,我们的功能模块将在使用我们的路由模块时提供路由器指令.

那么这是否意味着无论什么模块导入上面的NgModule,都可以访问RouterModule中的所有代码？

有点像我在C中编写包含math.h的自定义头文件,如果我现在使用该头文件,我不再需要在我的程序中单独包含math.h.我的比喻是否正确？

有人可以在这里解释核心概念,这样每次看到新代码时我都不会感到难过.

我正在努力深入了解角度,所以我阅读了文档,这非常有帮助.
现在我正在研究守卫.我在文档中读到了这个陈述.

路由器首先检查CanDeactivate和CanActivateChild防护,从最深的子路由到顶部.然后它从上到下检查CanActivate警卫到最深的子路线.

现在我很困惑,为什么角度以这种方式执行它？
对于CanDeactivate和CanActivateChild,从最深的孩子到顶部进行检查有什么好处.从顶部到CanActivate最深的儿童路线？

我试图实现延迟加载,但得到错误如下**

错误错误:未捕获(在承诺中):错误:已加载BrowserModule.如果需要从延迟加载的模块访问常用指令(如NgIf和NgFor),请改为导入CommonModule.

**

需要帮助.这是我的模块

1. 共享MOdule

@NgModule({

  declarations: [TimePipe],
  providers: [
    EmsEmployeeService,
    EmsDesignationService,
    EmsOrganizationService,
    EmsAuthService,
    AmsEmployeeService,
    AmsShiftService,
    ValidatorService,
    AmsLeaveService,
    AmsAttendanceService,
    AmsDeviceService,
    AmsOrganizationService,
    AmsAlertService,
    AmsHolidayService,
    AutoCompleteService,
    AmsTimelogsService,
    LocalStorageService
  ],
  imports: [
    HttpModule,
    ToastyModule.forRoot(),
    AgmCoreModule.forRoot({
      apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx'
    }),
  ],
  exports: [
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    RouterModule,
    MaterialModule,
    MdDatepickerModule,
    MdNativeDateModule,
    ToastyModule,
    FileUploadModule,
    NgxPaginationModule,
    NguiAutoCompleteModule,
    AgmCoreModule,
    TimePipe
  ]
})
export class SharedModule { }

Run Code Online (Sandbox Code Playgroud)

2.SettingModule

 @NgModule({
  imports: [
    CommonModule,
    SharedModule,
    SettingsRoutingModule
  ],
  declarations: [
    SettingsComponent,
    ShiftsComponent,
    DevicesComponent,
    AlertsComponent,
    HolidaysComponent,
    AlterTypesComponent,
    AlterEditComponent,
    ShiftTypeNewComponent,
    DeviceLogsComponent,
    ChannelTypesComponent,
    ChannelTypeEditComponent
  ], …

Run Code Online (Sandbox Code Playgroud)

如果输入了无效路径,有没有办法配置Angular2路由器重定向到特定路由？

例如,如果我有三条路线:
/ home
/ about
/ 404

我输入/训练(路线,路线配置中不存在),我希望路由器将我重定向到404.

使用Router(this.router.url)时/MyRouterName?type=abc,/MyRouterName如果没有参数,我会得到字符串

我是否只能/MyRouterName从完整的URL 获取路径(对于所有情况)？

我正在进入Angular2.我的目标是创建一个响应式应用程序,加载不同的组件以响应不同的媒体查询设备宽度.我的工作示例有一个MatchMediaService:

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

@Injectable()
export class MatchMediaService 
{
    constructor()
    {

    }

    rules =
    {
        print: "print",
        screen: "screen",
        phone: '(max-width: 767px)',
        tablet: '(min-width: 768px) and (max-width: 1024px)',
        desktop: '(min-width: 1025px)',
        portrait: '(orientation: portrait)',
        landscape: '(orientation: landscape)',
        retina: '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
    };

    Check = function (mq)
    {
        if (!mq)
        {
            return;
        }

        return window.matchMedia(mq).matches;
    };

/**********************************************
    METHODS FOR CHECKING TYPE   
 **********************************************/
    IsPhone()
    {
        return window.matchMedia(this.rules.phone).matches;
    };

    IsTablet = function ()
    {
        return window.matchMedia(this.rules.tablet).matches;
    };

    IsDesktop = …

我正在尝试实现这个RouteReuseStrategy课程.当我导航到顶级路径时,它工作正常.

一旦路径有子路径并导航到子路径,然后导航回顶级路径我收到以下错误:

错误:未捕获(在承诺中):错误:无法重新附加从其他路径创建的ActivatedRouteSnapshot

我创建了一个用于演示错误的plunker.我发现在IE 11中,plunker不起作用,请在最新版本的Chrome中查看

重现错误的步骤:

步骤1:

第2步

第三步:

第4步

您可以在控制台中查看错误:

我已经尝试了本文中的实现

export class CustomReuseStrategy implements RouteReuseStrategy {

    handlers: {[key: string]: DetachedRouteHandle} = {};

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldDetach', route);
        return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.debug('CustomReuseStrategy:store', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.debug('CustomReuseStrategy:shouldAttach', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.debug('CustomReuseStrategy:retrieve', route);
        if (!route.routeConfig) return null;
        return this.handlers[route.routeConfig.path];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, …

我是angular2的新手.我试图了解如何<router-outlets>在特定模板中使用多个.我在这里经历了很多质量保证,但无法解决我的错误.

router.module.ts

const routes: Routes = [
{
    path: '',
    redirectTo: 'one',
    pathMatch: 'full'
},
{
    path: 'two',
    component: ClassTwo, children: [
        {
            path: 'three',
            component: ClassThree,
            outlet: 'nameThree',
        },
        {
            path: 'four',
            component: ClassFour,
            outlet: 'nameFour'
        }
    ]
},];

component1.html

<h3>In One</h3>

<nav>
    <a routerLink="/two" class="dash-item">...Go to Two...</a>
    <a routerLink="/three" class="dash-item">... Go to THREE...</a>
    <a routerLink="/four" class="dash-item">...Go to FOUR...</a>
</nav>

<router-outlet></router-outlet>                   // Successfully loaded component2.html
<router-outlet name="nameThree" ></router-outlet> // Error: Cannot match any routes. URL Segment: 'three' …