标签: angular2-router

我正在尝试在新的 Angular2 应用程序中实现过滤机制，这将允许我过滤数组中的条目列表。这些条目可能有大约 20 个可以过滤的属性。到目前为止，我已经在一个组件中创建了一个过滤器列表，然后创建了一个作为子组件路由到的列表组件。然后我计划通过路由器将过滤器作为 queryParams 传递。从只有一个过滤器开始这很好：

在发送端我有：

this.router.navigate(['/findlist'], {queryParams: {'g': myParam}});

在接收端，我有：

this.subscription = this.route.queryParams.subscribe(
  (queryParam: any) => this.myFilter = queryParam['g']
);

然后我将 myFilter 传递给过滤器管道以进行匹配和过滤。到目前为止一切正常。

但是，我不知道如何扩展它以允许多个潜在的参数，其中大部分是空白/不需要的。

我可以想象我需要通过 queryParam 定义一个包含所有活动过滤器的数组，但我能找到的唯一文档，只显示只传递一个参数的示例。我试过玩弄：

{queryParams: { pass an array here! }}

但是如果我在 key:value 对以外的地方放了任何东西，我的 IDE 就会注册一个错误。

我可能每次都可以添加所有可能的过滤器及其值，但是每次都会创建一个非常长的 URL 字符串，大多数值为空白或 All 等，不是很漂亮。

所以我认为我的工作流程应该是在发送端我维护一个包含所有过滤器及其状态的数组，然后每次点击一个过滤器按钮时，我首先更新数组中的相关值，然后传递整个数组通过查询参数。

在接收端，我必须以某种方式接收和处理 Param 作为数组，然后将每个条目提取为变量，然后在过滤器中进行处理。我也想要 DRY，所以真的不希望接收端的几个语句有效地为不同的属性做同样的事情，简单地说，循环遍历数组更有意义。

我希望这是有道理的，如果有人提出建议，我将不胜感激，即使这意味着以不同的方式传递数据。例如，我目前正在查看是否可以通过创建单独的过滤器服务并使用 @Input 传递数据来传递数据。

感谢收到任何想法（自学的业余爱好者，所以可能会遗漏一些明显的东西！）

谢谢

托尼

我在组件中有这段代码

<a *ngFor="let item of config.socialLinks" [routerLink]="[item.url]">
...
</a>

当使用app.component中定义的本地路由但是当外部路由重定向到http:localhost:5555时,这可以正常工作.http://external.com 有没有办法将routerLink用于本地路由,并将href用于外部路由？

我正在尝试对路由进行访问检查并显示访问被拒绝的页面而不是实际页面。从下面的示例中，我们可以警告路线单击时拒绝访问。我更愿意导航到实际页面，然后显示访问被拒绝。

http://plnkr.co/edit/w1NCkGs0Tv5TjivYMdvt?p=preview

假设进行访问检查的 url 是/admin/manageusers，组件名称是ManageUserComponent，如果用户没有访问权限并尝试该 url，它应该导航到该路由，/admin/manageusers 但应该显示Access Denied in the page。

1.我能做的一件事是使用路由功能并获取与用户访问以及切换模板resolve相关的值。ManageUserComponent这种方法最终将在与我想要实现访问逻辑的路由相关的多个组件中具有类似的代码。

2. 让所有component需要访问检查的地方扩展另一个base class并验证上述逻辑，如果成功则允许子组件继续。还没有弄清楚如何正确扩展另一个类

主要目标是在页面中保留访问的 url 和错误消息。并且组件函数不应该执行。

如果您能想到实施的方法和选项，请分享。

如果描述不清楚，请告诉我，我会尽力改进。

我想为angular2应用程序配置路由.我的网址必须是这样的:

HTTP:// DOMAIN_NAME/constant_value/VARIABLE_VALUE/constant_value

网址可以是以下示例:

http://localhost/myhouse/floor1/mirror

http://localhost/myhouse/floor1/room1/mirror

http://localhost/myhouse/floor1/room1/bathroom/mirror

这里的路线/ myhouse和/ mirror是不变的.但中间部分可以是/ floor1或/ floor2 / something/something/....

如何在路由模块中为其定义路由.

const routes: Routes = [
    {
        path: 'myhouse',
        children: [
            {
                path: ..., //here how do i configure it
                children: [
                    {
                        path: '/mirror',
                        component: MirrorComponent            
                    }
                ]
            }
        ]
    }
];

如果url在url 的末尾有/ mirror,那么必须加载镜像组件,如果不加载login组件的话.将为上面显示的URL加载镜像.根据url的可变部分,每个镜像组件内部将具有不同的属性值.

对于登录组件,网址将如下:

HTTP://本地主机/的MyHouse

要么

HTTP://本地主机/的MyHouse/floor1

要么

HTTP://本地主机/的MyHouse/floor1/bathroom1

我试过想使用正则表达式,但似乎新版本的angular2不支持正则表达式.如果我错误地无法使用正则表达式,请通过示例向我指出这个方向.如果没有,请指出我正确的方向.

按钮看起来像这样

<button [routerLink]="['/account/recovery','identification']" class="btn btn-default">Back</button>

我想检查/account/recovery/identification点击按钮后url 是否已重定向到

如果是锚标签解决方案这里提供。我的问题是按钮标签。

我的测试规范如下所示。

beforeEach(async(() => {
        let ne = new NavigationEnd(0, "/account/recovery/otp", null);       // Create a mock instance for navigation end, utilized within OnInit()
        router = {
            navigate: jasmine.createSpy('navigate'),    // to spy on the url that has been routed
            events: new Observable(observer => {        // last router event that occurred
                observer.next(ne);
            }),

        };
        TestBed
            .configureTestingModule({
                imports: [CoreModule],
                declarations: [OtpComponent],
                providers: [
                    {provide: Router, useValue: router},
                    {provide: ActivatedRoute, useValue: router},
                    {provide: …

在使用路由器模块v 3.0.0.6alpha的angular2 rc2中,我扩展了RouterOulet以检查用户是否在访问管理员之前已登录.所以这是代码:

@Directive({
    selector: 'router-outlet'
})

export class LoggedInRouterOutlet extends RouterOutlet 
{
    publicRoutes: Array<string>;
    private parentOutletMap: RouterOutletMap;
    private userService: UserService;
    private parentRouter: Router;

    constructor(
        parentOutletMap: RouterOutletMap,
        _location: ViewContainerRef,
        @Attribute('name') name: string,
        userService: UserService,
        parentRouter: Router
    ) { 
        super(parentOutletMap, _location, name);

        this.parentRouter = parentRouter;
        this.parentOutletMap = parentOutletMap;
        this.userService = userService;
        this.publicRoutes = [
            'public', 
            'login'
        ];
    }

    activate(factory: ComponentFactory<any>, activatedRoute: ActivatedRoute, providers: ResolvedReflectiveProvider[], outletMap: RouterOutletMap) 
    {
        if (this._canActivate(factory.selector)) { 
            return super.activate(factory, activatedRoute, providers, outletMap); 
        }

        this.parentRouter.navigate(['/login']);
    }

    _canActivate(url) {
        return …

我看到了两种将简单数据（例如字符串）从路由路径传递到不同组件的方法：

第一种方式：

路由方：

export const AppRoutes: Routes = [
  ...
  { 
    path: '/one', component: OneComponent, resolve: { foo: 'foo' }
  }
];

组件侧：

@Component()
export class OneComponent implements OnInit {
    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.foo = this.route.snapshot.data['foo'];
    }
}

第二种方式：

路由方：

const routes: RouterConfig = [
    ...
    {
      path: '/one', component: OneComponent, data : {some_data : 'some value'}
    }
];

组件侧：

@Component()
export class OneComponent implements OnInit {
    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.obs = this.route
          .data …

我有一个组件显示使用ng2-bootstrap tabset和tab.

例:

<tabset>
    <tab heading="Info" [active]="tabs[0].active">
        <account-data *ngIf="tabs[0].active"></account-data>
    </tab>
    <tab heading="Users" [active]="tabs[1].active">
        <manage-users *ngIf="tabs[1].active"></manage-users>
    </tab>
    <tab heading="Billing" [active]="tabs[2].active">
        <account-billing *ngIf="tabs[2].active"></account-billing>
    </tab>
</tabset>

注意:tabs[N].active由组件控制并已同步选项卡更改和路由.但我觉得我的做法是错误的,因为在选定的标签内部管理路由很困难.让我们看第二个标签,在一天结束时它应该管理以下子路径:

.../users          -> provide list of users
.../users/new      -> create new user
.../users/:id      -> show a particular user
.../users/:id/edit -> edit a particular user

这并不容易,因为显示标签的组件已经使用了这条路线:

.../:tab

如果有这样的事情会更容易:

<tabset>
    <tab heading="Info" [routerLink]="['info']"></tab>
    <tab heading="Users" [routerLink]="['users']"></tab>
    <tab heading="Billing" [routerLink]="['billing']"></tab>
</tabset>
<router-outlet></router-outlet>

有人为此解决了吗？这个问题应该很常见......

我有一个带有typescript和systemjs的角度两个应用程序.

我的应用程序只有800kb,只需4秒即可完成仅包含文本的页面.

我所有的js和css都是小/缩小的,我总共有11个请求,几乎没有任何图像

所有图像都被压缩并在cdn firebase中.

我使用firebase托管并使用cloudflare进行ssl和性能.

有没有人在负载和缓存方面遇到较差的angular2性能.

我没有在速度方面得到任何缓存改进.

下面是文件和加载时间的屏幕截图:

这是速度测试结果:https://www.webpagetest.org/result/161205_0H_S4H/

加载请求:17(参见下面加载网络选项卡的屏幕抓取)