标签: angular2-routing

当路由器创建组件时,如何设置属性绑定？

我routes在我的main.ts文件中定义了一些:

const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: '', redirectTo: 'home', terminal: true },
  { path: 'dashboard', component: DashboardComponent, canActivate: [LoggedInGuard] },
  { path: 'login', component: LoginComponent },
  { path: 'about', component: AboutComponent } 
];

成功登录后,我希望我的经过身份验证的用户可以使用特定路由(例如dashboard).没有登录他们无法访问,dashboard但他们可以访问about,home,login

我设法限制用户遍历dashboard无登录,使用CanActivate.

canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true; 
    }
    this.router.navigateByUrl('/login');
    return false;
  }

但是CanActivate在成功登录后使用这些路线和方法,用户也可以转到像login,等路线home.我怎么能防止这种情况？

NB我正在使用angular2 RC4.

我有时会有一个可以接收这样的文本的组件:

文本www.website.com

但是如果它是一个链接我想将它转换为url.像这样.

文本www.website.com

我读了这个SO答案,建议使用第三方库,例如anchorme.有没有办法以angular2方式做到这一点？

我想实现这样的东西/products显示所有产品并/products/:category显示与特定类别相关的所有产品.为实现这一点,我有以下路线:

const productsRoutes: Routes = [
  {
    path: 'products',
    component: ProductsComponent,
    children: [
      {
        path: '',
        component: ProductsListComponent,
      },
      {
        path: ':category',
        component: ProductsListComponent
      }
    ]
  }
];

问题

当我在类别之间切换时,一切都很好,当我在所有产品和类别产品之间切换时,反之亦然,Angular会重新绘制组件,并且会出现闪烁现象.

Angular 2路由器最终版本没有正则表达式,据我所知.有什么东西我缺少,或者现在这是唯一的解决方案？

这是一个关于如何使用Angular 2以"正确"方式实现所需功能的概念性问题.

我的应用程序有一个导航菜单,一个工具栏和一个内容区域.后者包含主要内容<router-outlet>并显示不同的视图,如列表和详细信息.

我想要实现的是工具栏显示不同的组件,具体取决于在内容区域中呈现的组件/视图.例如,列表组件需要工具栏中的搜索控件,而详细信息组件需要保存按钮.

A)我的第一次尝试是<router-outlet>在工具栏中添加另一个(命名)并根据静态路径显示工具栏组件.这有什么不妥之处:

1. 根据我的口味,静态内容工具栏关系过于松散.
2. 该关系在URL中可见(并且可更改).
3. 即使用户导航,工具栏插座也会保留此路径.

B)我的第二次尝试是命令性地导航到主视图组件中的工具栏组件(也使用命名的工具栏插座),ngOnInit它更紧密地耦合它.什么闻起来很糟糕:

1. A2
2. A3,为了防止这种情况我可以"清除"工具栏插座ngOnDestroy,但我还没有发现如何.

C)给路由器一个最后的机会,因为我发现这种工作:

const ROUTES: Routes = [
    {path: "buildings", children: [
        {path: "", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
        {path: "", component: BuildingListToolbarComponent, pathMatch: "full", outlet: "toolbar"},
        {path: ":id", component: BuildingDashboardComponent, outlet: "primary"}
    ]}
];

这个想法是路由器会选择每个插座的匹配路径.但是(不,它可能很容易)不幸的是,这不起作用:

const ROUTES: Routes = [
    {path: "buildings", children: [
        {path: "list", component: BuildingListComponent, pathMatch: "full", outlet: "primary"},
        {path: "list", component: BuildingListToolbarComponent, …

我使用Angular 2.4.8.与后端的通信是通过REST进行的.在每个请求中,我需要X-Auth-Token在标头中发送.令牌存储在会话中.令牌过期时,服务器返回401状态.在这种情况下,我希望应用程序进入登录页面.

我在我的项目中添加了http拦截器

@Injectable()
export class HttpInterceptor extends Http {

    constructor(backend: XHRBackend
        , defaultOptions: RequestOptions
        , private router: Router
    ) {
        super(backend, defaultOptions);
    }

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
        return super.request(url, options).catch((error: Response) => {
            if ((error.status === 401 || error.status === 403) && 
            (window.location.href.match(/\?/g) || []).length < 2) {
                // tslint:disable-next-line:no-console
                console.log('The authentication session expires.');
                window.sessionStorage.removeItem('auth-token');
                window.location.href = window.location.href + '/login';
                // this.router.navigate(['/login']);
                return Observable.empty();
            }
            return Observable.throw(error);
        });
    }
}

除了以外它运作良好.但我不使用路由器,而是简单的重定向和整个应用程序重新加载.当我改变评论时

// window.location.href …

我正在开发一个angular2应用程序,我使用路由器.我在页面/ myapp /注册.注册后,我将使用导航到/ myapp/login./ myapp/login也可以从我的主页/ myapp导航.所以现在,当用户users/myapp/login我回去了.这可以通过使用location.back()来完成.但是当用户来自/ myapp/signup时,我不想回去.所以我应该检查用户是否来自/ myapp/signup,如果是,我想将它指向其他地方.我如何才能知道以前的网址,以便根据具体情况将用户定向到特定状态？

我正在使用@angular rc4 "@angular/router": "^3.0.0-beta.2"

我无法让子路由工作,当我开始添加子路由时,我会遇到很多种错误:这是我的路由代码:

{ path: '', redirectTo: 'parentComp'},
{ path: 'parentComp', component: parentContainer, 
        children: [
            {path: 'componenta', component: ComponentA }
        ]
    }

EXCEPTION:在实例化路由器时出错!.BrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65(匿名函数)@ application_ref.js:337schedulerFn @async.js:139SafeSubscriber .__ tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:127onError @ ng_zone .js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423 browser_adapter.js:84 ORIGINAL EXCEPTION:错误:路由的路由配置无效' {path:"",redirectTo:"activity"}':请提供'pathMatch'.'pathMatch'的默认值是'prefix',但通常意图使用'full'.BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:74(匿名函数)@ application_ref.js:337schedulerFn @ async.js:139SafeSubscriber .__ tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ …

在我的应用程序有一个SupportModule有3个子模块(AdminModule,ChatModule,ContactModule).SupportModule它的3个子模块有自己的路由定义.

结构看起来像

"AdminModule"的路由如下:

import { AdminComponent }   from './admin.component';
import { RssFeedsComponent }   from './rssFeeds.component';
import { RssFeedDetailComponent }   from './rssFeedDetail.component';

export const adminRoutes: Route =      
    {
        path: 'admin',
        component: AdminComponent,
        children: [
            { path: '',  component: RssFeedsComponent },
            { path: 'feeds',  component: RssFeedsComponent },
            { path: 'feeddetail', component: RssFeedDetailComponent }
        ]
    };    

和路由SupportModule(这是3个子模块的父模块)如下:

import { SupportComponent } from './support.component';
import { SupportNavComponent } from './support-nav.component';
//Feature Modules …

我正在尝试使用路由器延迟加载Angular 2模块,我遇到了这个错误:

error_handler.js:50 EXCEPTION:未捕获(在承诺中):错误:找不到模块'app/home/home.module'

我尝试了所有似乎对其他人有用的答案,比如这个似乎是每个人都面临这个问题的解决方案,但是不适用于我在Angular2 RC7和angular-cli webpack中加载Lazy

这是我的代码:app.module

import { MediatorService } from './home/mediator.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';


import appRoutes from "./app.routes";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    appRoutes
  ],
  providers: [MediatorService],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.routes

import { RouterModule } from …