标签: angular2-routing

我正在试验以下种子来自https://github.com/NathanWalker/angular2-seed-advanced

我有以下src文件:

app.component.ts

import { ChangeDetectionStrategy } from 'angular2/core';
import { RouteConfig } from 'angular2/router';
import { NameListService } from '../../frameworks/app.framework/index';
import {
    RouteComponent, AnalyticsService
} from '../../frameworks/core.framework/index';
import { LangSwitcherComponent } from '../../frameworks/i18n.framework/index';
import { NavbarComponent } from './navbar.component';
import { ToolbarComponent } from './toolbar.component';
import { HomeComponent } from '../home/home.component';
import { AboutComponent } from '../about/about.component';
import { PatientComp } from '../../frameworks/epimss.framework/components/reg/patient/patient.comp';

@RouteComponent({
                  selector       : 'sd-app',
                  viewProviders  : [NameListService],
                  templateUrl    : './components/app/app.component.html',
                  directives     : [LangSwitcherComponent, NavbarComponent, ToolbarComponent], …

嗨,我正在使用angularjs2的新alpha组件路由器https://angular.io/docs/ts/latest/guide/router.html

我有一个模式用于验证用户然后在localstorage中创建一个JWT,它保存用户所需的信息.

我的问题是,如果用户正在查看/home路径,那里只有登录用户可见的东西,但在他通过模态登录后,他必须刷新页面,以便组件刷新并显示正确的记录 -在信息中

有没有办法告诉angular2刷新当前路径上的所有组件？像一个页面重新加载,但没有真正重新加载整个页面(我不想只是为用户点击刷新按钮)

提前致谢

编辑:当我尝试重定向到我已经在的路线时,可能还有一个强制重定向功能？

EDIT2:尝试使用observables

@Injectable()
export class UserService {
  private loggedInObservable;

    constructor(private http: Http) {
        this.loggedInObservable = Observable.of(this.checkIsLoggedIn());
    }

    checkIsLoggedIn() {
        let isLoggedIn = false;
        try {
            isLoggedIn = tokenNotExpired();
        } catch(e) {

        }
        console.log('returning:', isLoggedIn);
        return isLoggedIn;
    }


    login(model, cbSuccess=null, cbError=null, cbAlways=null) {
        serverPost(this, '/api/users/login', model, cbSuccess, cbError, cbAlways, (data)=> {
            localStorage.setItem("id_token", data.id_token);
            this.loggedInObservable.map((val) => console.log('HELLO?'));
        });
    }

    isLoggedInObservable() {
        return this.loggedInObservable;
    }
}

地图完全没有('HELLO？'没有显示),虽然观察者有一个值,地图功能不会调用任何东西.

使用观察者:

import {Component, OnInit, OnDestroy} from '@angular/core'; …

Angular 2.3.0

我像这样定义了一个 Angular 2 模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { AppComponentRoute }  from './components/+app/index';
import { AppComponent }  from './components/+app/app.component';
import { HomeComponentRoute } from './components/+home/index';
import { HomeComponent }  from './components/+home/home.component';
import { ContactComponentRoute } from './components/+contact/index';
import { ContactComponent }  from './components/+contact/contact.component';

let app_routes: Routes = new Array();
    app_routes.push(AppComponentRoute);
    app_routes.push(HomeComponentRoute);
    app_routes.push(ContactComponentRoute);

@NgModule({
    imports:[
        BrowserModule,
        RouterModule.forRoot(app_routes)
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        ContactComponent …

@RouteConfig([
  { path: '/post/:post_id', component: PostComponent }
])

使用这种经典的路由策略,/post/1715我收到了这个JSON数据.

{
  "post_id": 1715,
  "title": "The Post Title",
  "urlTitle": "the-post-title",
  "body": "Blah, blah ... blah"
}

但是如何/post/1715/the-post-title通过添加urlTitle链接将路由器重定向到Stackoverflow URL样式？

我有一项服务,检查用户是否有权打开路线.

@Injectable()
export class GuardService implements CanActivate{
     user: User;
     constructor(private _userService: UserService) {
}

canActivate(): any{
    return this._userService.getUser().subscribe(user => {
        if(user.user_type == 'admin'){
            return true;
        }
        return false;
    });
}

但问题是它永远不会过去.问题在于这种可观察性,但我不知道如何处理它.我怎样才能做到这一点？提前致谢

我正在学习 Angular2 Routing 并尝试显示欢迎页面。我的应用有三个页面

• 欢迎页面（它只是一个空白页面，只有指向其他路线的链接）
• 主页 - 一些文字和说明
• 待办事项列表页面 - 待办事项列表

问题是我无法显示欢迎页面。默认情况下，它会自动加载主页并显示来自 HomeComponent 的内容。

如屏幕截图所示，我只想显示 2 个链接。我只想在单击时从 Home/Todo 加载内容。但默认情况下，它会转到 localhost:xxx/Home 并加载主页。

我尝试将 '' 空白路径设置为 AppComponent 如下，但它加载 AppComponent 两次并显示链接两次。

{ path: '', component: AppComponent, pathMatch: 'full' },

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        RouterModule.forRoot([
            { path: 'home', component: HomeComponent },
            { path: 'todo', component: TodoListComponent },
            { path: '**', redirectTo: 'home', pathMatch: 'full' }
        ])
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        TodoListComponent
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

app.component.ts …

慢慢地掌握了 angular 2，但我在一个特定的问题上走到了尽头。

如果你有这样的安排；

<parent>
    <child/>
</parent>

我可以通过使用@Input() 通知子级父级的变化，并让它监听变化。我可以通过使用 @Output() 和 EventEmitters 来通知父级子节点的变化。

我现在看到的是通知路由组件（一个在单击链接时动态加载的组件）关于主 appComponent 中发生的特定事件。见下面的例子；

<app>
    <button (click)='addEntity()>Add</button>
    <router-outlet></router-outlet>
</app>

我希望能够通知加载到路由器插座的组件已单击该按钮。

一个使用示例是具有多个功能（英雄/联系人/宠物等），每个功能都有自己的用于添加实体的对话框。根据选择的路由，它需要通知选择的特征组件（例如ContactComponent）显示其特定的细节组件/视图/模板（例如contact-detail.component）。

实现这一目标的最佳方法是什么？

干杯

我在一个 angular2 组件中有以下代码：

ngOnInit() {
    this.route.params
      .switchMap((params: Params) => this.elementsService.getElement(+params['id']))
      .subscribe(element => {
                    this.elementToEdit = element;
                }
      );
  }

此组件在两种情况下使用，一种id是在 url 中提供了，另一种是没有id提供。在第一种情况下，它工作正常。在第二个中，它可以工作，但控制台中出现 404 错误：api/elements/NaN.

我正在尝试解决这个问题，但我找不到一种方法来检查idurl 中是否存在：

ngOnInit() {
  if(this.route.params['id']){<---doesn't work
    this.route.params
      .switchMap((params: Params) => this.elementsService.getElement(+params['id']))
      .subscribe(element => {
                    this.elementToEdit = element;
                }
      );
  }
}

如果id参数不存在，有没有办法做到这一点并避免调用服务？

嗨，我需要从类型脚本文件中调用一个普通的javascript 函数。

function test(){

cosole.log('test');

}