标签: angular2-routing

在我的应用程序中，我有一个标题，其中包含菜单项。我正在从服务中检索菜单列表并在标题中显示相同的菜单列表。将鼠标悬停在主列表上时，我将显示子菜单。我想在单击子项目并导航到其页面时使父项目处于活动状态（子项目可以处于多个级别）。我希望用户在他们所在的页面下得到通知。

超文本标记语言

<div class="collapse navbar-collapse">
    <ul class="navbar-nav mx-auto">
        <li class="nav-item dropdown" *ngFor="let menu of menus"></li>
        <a class="nav-link dropdown-toggle" href="#" id="{{ menu.label }}" data-toggle="dropdown"
            aria-expanded="false">{{ menu.label }}</a>
        <div *ngIf="menu.items.length > 0" class="dropdown-menu mt-0">
            <span *ngFor="let item of menu.items | SortOptionsBy: 'label'">
                <a routerLink="{{ item.url }}" *ngIf="!item.disabled" class="dropdown-item">
                    {{ item.label }}
                </a>
                <span *ngIf="item.items && item.items.length > 0">
                    <span *ngFor="let submenu of item.items | SortOptionsBy: 'label'">
                        <a href="{{ submenu.url }}" class="dropdown-item" target="_blank">
                            {{ submenu.label }}
                        </a>
                    </span>
                </span>
            </span>
        </div>
    </ul>
</div> …

我有一个BookDetailComponent映射为url 的组件/books/:id.在angular 2路由器中是否有任何方法可以确保只有在从服务器检索到Bookgiven 后才能打开此组件id？

我正在寻找像Angular 2路由器中的ui-router resolve类似的功能.

/*** BookComponent ***/
@RouteConfig([
  {path: "/books/:id", component: BookDetailComponent, as: "BookDetail"},
])

export class BookComponent {
}


/*** BookDetailComponent ***/
export class BookDetailComponent {

  book:Book;

  constructor(private bookService:BookService,
              private routeParams:RouteParams) {
  }


  ngOnInit() {
    let id = this.routeParams.get("id");
    this.bookService.getBook(parseInt(id))
      .subscribe(book => this.book = book.json());
  }
}

我有一个小的Plunk,我正在使用Angular 2中目前可用的新的Router 3.0 alpha.它一般运行良好,但问题是,一旦我点击一个路由到'detail'的链接具有特定ID的组件,当我单击具有不同ID的其他链接时,它永远不会更改.该组件永远不会被重新实例化,因此它只会在第一次加载时显示它被传递的内容.

这是有问题的组件:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ContactsService } from './contacts.service';

@Component({
  selector: 'contacts-detail',
  template: `
    <h2>{{contact.name}}</h2>
  `
})
export class ContactsDetailComponent implements OnInit { 

  constructor(private contactsService: ContactsService, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.contact = this.contactsService.getContact(this.route.snapshot.params.id);
    console.log('Fetching user', this.route.snapshot.params.id);
  }
}

以下是Plunk展示了这个问题.单击一个作者姓名,然后单击另一个作者名称以查看其不更改.

试图完成一个被旧路由器陷入困境的教程.我已更新代码以使用新路由器,但我无法理解routerLink.感谢您的帮助.

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import {APP_ROUTER_PROVIDERS} from './app.routes';

bootstrap(AppComponent, [
  APP_ROUTER_PROVIDERS,
])
.catch(err => console.error(err));

app.component.ts

import { Component } from '@angular/core';
import { NavbarTopComponent} from './components/navbar-top/navbar-top.component';
import {ROUTER_DIRECTIVES} from '@angular/router';
import {AboutComponent} from './components/about/about.component';
import {SearchComponent} from './components/search/search.component';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html',
    directives: [ROUTER_DIRECTIVES,NavbarTopComponent,SearchComponent]

})
export class AppComponent { }

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import {AboutComponent} from './components/about/about.component';
import {SearchComponent} from './components/search/search.component'; …

在路线“（主页）上，我的AppComponent的html加载了两次。

主要

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode, NgModule } from '@angular/core';
import { AppComponent } from './app/components/app/app.component';
import { APP_ROUTER_PROVIDERS } from './app/components/app/app.routing';

if (true) {
  enableProdMode();
}

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

应用程序路由

import { Routes, RouterModule, provideRouter } from '@angular/router';
import { AuthComponent } from "../auth/auth.component";
import { AppComponent } from "./app.component"

const appRoutes: Routes = [
  {
    path: 'auth',
    component: AuthComponent
  },
  {
    path: '',
    component: AppComponent
  }
];

export const APP_ROUTER_PROVIDERS = [provideRouter(appRoutes)];

app.component.ts

import …

我不能因为对饼干的喜爱而弄清楚如何配置Angular 2路由器的最新版本(最终版本中的那个).我有一个相当大的Angular 2 RC5应用程序启动并运行,但在我继续前进之前需要迁移到最终版本.

在这个应用程序中,我有很多嵌套组件,根据谷歌的文档,应该组织为模块中的功能.我的应用中的典型网址如此

user/34/section/95/client/13/<feature>

但也有一些其他的,比如

user/34/settings

所以在这种情况下,settings将是一个功能模块.

我已经阅读了这些文档,这些文档相当冗长,并不急于切入追逐,只是发现这个案例根本没有涉及.我无法相信这种情况不会起作用,这似乎是一个巨大的疏忽,所以我想问题是我还没有完全理解这个路由器实际上是如何工作的 - 我感觉我是我不是唯一的一个.

我已经创建了这个plunker来说明我的观点.

在这个plunker我有2级嵌套

app -> benutzer (user) -> klient (client)

足以使问题出现.预期的结果是我可以导航到

benutzer/78/klient/56

即路由器实际上找到了该路由,此时它没有.

在我将代码移动到plunker并添加之前dashboard.component(因为我无法在plunker中轻松修改URL,所以我不得不诉诸routerLink)我实际上可以导航到

klient/56

这是不可能的.看起来在另一个模块中定义的每个路由都被添加到根目录而不是彼此重叠.

非常感谢任何帮助.

在Angular 2.0 stable中,我有一个应用程序,我必须根据收到的JSON数据定义/配置路由.我没有任何预定义的路由.我在我的bootstrap组件的构造函数中获取此数据.

我怎样才能实现这一目标？可能吗？

我想以编程方式从组件中更改url的片段,但我没有这样做.

<a #linkComponent routerLink='home' fragment='part'>link</a>

@ViewChild('linkComponent') linkComponent;

this.linkComponent.????

或者也许有一种不同的方式可能使用路由器

从使用Bootstrap 4构建导航菜单,我创建了一个顶部导航菜单:

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
    <div class="container">
        <a class="navbar-brand">Angular Router</a>
        <ul class="nav navbar-nav" routerLinkActive="active">
            <li class="nav-item"><a class="nav-link" routerLink="home">Home</a></li>
            <li class="nav-item"><a class="nav-link" routerLink="about">About</a></li>
            <li class="nav-item"><a class="nav-link" routerLink="courses">Courses</a></li>
        </ul>
    </div>
</nav>

<router-outlet></router-outlet>

问题是,当我点击菜单项时home,它不会显示为活动状态.我没有包括在内bootstrap.js.

而不是bootstrap.js&jQuery,我可以在Angular 2中将所选菜单设置为活动的最佳方式是什么？

我有一个使用角度2的api驱动应用程序.我创建了一个扩展angular2-sails的全局服务,如果对调用的响应是401 PLEASE_LOGIN,则将用户重定向到注册组件.

问题是当我重定向到注册组件时,视图(正确加载)不响应用户操作.没有错误,组件方法在我调用和工作时,例如,单击一个按钮,但视图只是没有反应或更新.

我的设置如下:我的主组件模板引用了user-sidebar.component.此侧边栏组件具有ngOnInit方法,该方法向后端询问经过身份验证的用户.如果没有经过身份验证的用户,则加载它的服务会重定向到/ signup

我的user-sidebar.component ngOnInit方法:

ngOnInit(): void 
{
    this._authService
        .me()
        .subscribe(
            (resData: Object) => { this.user = resData.data; },
            (err: any) => { console.log(err); }
        );
}

AuthService .me()方法

me(): any 
{
    return this._appService.get('/me');
}

我的app.service get方法:

get(path: string, data: Object): Observable
{
    return this._sailsService.get(path, data)
        .catch(this.handleError.bind(this));
}

public handleError(err: Response): void
{
    // If the server response with unhautorized, redirect to login / signup page
    if(err.statusCode == 401 && err.error == 'PLEASE_LOGIN')
    { 
        this._router.navigate(['/signup']);
    } …