标签: angular2-routing

我需要在 Angular 2 中获取页面的子域，因为它与路由相关。我看到在多次中断发布后，Angular 2 中的路由器服务仍然没有域的概念。同样，Location 服务不知道 URL 的主机部分。

我有 Spring Boot 应用程序（后端），对于前端，我使用 Angular 2 单页应用程序。

每当我导航到路线（例如：localhost:8080/getAccounts）并在导航后刷新时，我都会收到 Whitelabel 错误页面。如果我位于根 localhost:8080 ，我工作得很好。该问题仅发生在子链接中。

返回（使用返回/后退按钮）到上一页也可以正常工作。只是刷新。

我也无法直接调用链接：localhost:8080/getAccounts。首先，我必须转到主页（localhost：8080）并通过子导航栏调用该页面。

有人遇到同样的问题吗？我确实必须改变。我的代码：

主.ts

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

enableProdMode();
bootstrap(AppComponent, [HTTP_PROVIDERS]);

应用程序组件：

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

import { Http } from '@angular/http';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

import { HomeComponent } from './home.component';
import { UserSearchComponent} from './webUserProfiles.component';
import { UserDetailViewComponent} from './webUserProfileView.component'; 

import { HTTPService } from '../service/http.service';


@Component({
  selector: 'app-content', …

我有一个路由网址，如：

/departments/:id/employees/assign'

当我导航到上述网址时：

this._router.navigate(['/departments/:id/employees/assign', id]);

然后 angular 总是将传递的 id 附加到 url 的末尾，但这不是我想要的。

当我尝试这个时

this._router.navigate(['/departments/:id/employees/assign', {id: id}]);

我在浏览器中得到这个网址：

http://localhost:4200/departments/%3Aid/employees/assign;id=1

我希望网址在浏览器中： /departments/1/employees/assign

我需要改变什么？

我的 Angular 应用程序加载组件两次。最初，我<router-outlet></router-outlet>在组件的模板中使用了它，它工作正常，但仍然出现以下错误：

core.umd.js:3257 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'\ncore.umd.js:3262 ORIGINAL STACKTRACE:\ncore.umd.js:3263 Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'\nzone.js:355 Unhandled Promise rejection: Cannot find primary outlet to load 'AppComponent' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'AppComponent'(\xe2\x80\xa6) Error: Cannot find primary outlet to load 'AppComponent' \nzone.js:357 Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'AppComponent'\n …

我正在努力弄清楚如何存根 angular 的激活路线以满足我的目的。在我的一个组件中，我使用路由快照来获取激活路由的 url 的一部分：

let activatedPath = this.route.snapshot.children[0].url[0].path;

在我的测试中，我收到错误：

Error: Error in :0:0 caused by: undefined is not an object (evaluating 'this.route.snapshot.children[0].url')??

所以我想我需要存根 Activated 路线：

class FakeActivatedRoute {
    // stub detail goes here
}

并在我的测试中提供它：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      declarations: [
        SiteAdminComponent
      ],
      schemas: [NO_ERRORS_SCHEMA],
      providers: [
        { provide: ActivatedRoute, useClass: FakeActivatedRoute }
      ]
    })
     .compileComponents();
}));

任何人都可以提供有关允许我到达的存根实现的任何指导.snapshot.children[0].url[0].path吗？我目前一无所获:-)

我有一个以这种方式使用惰性模块的应用程序：

export const routes: Routes = [
  {
    path: '',
    component: WelcomeComponent
  },
  {
    path: 'items',
    loadChildren: 'app/modules/items/items.module#ItemsModule'
  }
];

export const AppRoutingModule: ModuleWithProviders
                      = RouterModule.forRoot(routes);

在 中ItemsModule，我想对其中一条子路线使用守卫：

const routes: Routes = [
  {
    path: ':slug', component: ItemComponent,
    canActivate: [ ItemFetchGuard ]
  }
];

export const coveragesRoutingModule: ModuleWithProviders = 
                          RouterModule.forChild(routes);

这个守卫需要获取slug参数来获取数据：

@Injectable()
export class CoverageFetchGuard implements CanActivate {
  constructor(
    private service: ItemService,
    private route: ActivatedRouteSnapshot,
    private ngRedux: NgRedux<IAppState>) {}

  canActivate() {
    const slug = this.route.params['slug'];
    return …

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

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 和错误消息。并且组件函数不应该执行。

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

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

我有一个带有Angular Material选项卡的 Angular 4 应用程序，我正在尝试使用选项卡式子路由。

我在主路由文件中定义了一些路由：

...
{ path: 'wall', component: WallHandlerComponent, canActivate: [LoggedGuard], children: [
    { path: '', redirectTo: 'recent', outlet: 'walloutlet' },
    { path: 'recent', component: RecentEventsComponent, outlet: 'walloutlet' },
    { path: 'ranking', component: RankingUsersComponent, outlet: 'walloutlet' }
] },
...

我加载WallHandlerComponent我的主<router-outlet>没有问题。

现在，在我的wall-handler.component.html文件中，我有一个辅助/命名的<router-outlet>：

...
<nav md-tab-nav-bar>
    <a md-tab-link
        *ngFor="let link of wallNavLinks"
        [routerLink]="link.path"
        routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        {{link.label}}
    </a>
</nav>

<router-outlet name="walloutlet"></router-outlet>
...

在 my 中wall-handler.component.ts，我定义wallNavLinks …

我有一个在 springboot 端口 8080 上运行的 Web 服务。当我点击下面的 url 时，它工作正常：

http://localhost:8080/app，我将 url 重定向到下面：

http://localhost:8080/myHome/home

现在当我刷新页面时，我收到 404

下面是我的 index.html 的内容：

  <base href="/myHome">

包.json：

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --dev --deploy-url=\"/app/\"",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "protractor"
},

我曾尝试使用中提到的 LocationStrategy

Angular 2: 404 错误在我通过浏览器刷新时发生，但它对我不起作用。

我有一个角度为 7 的项目

我有带<a>标签的路由器链接，我有嵌套<a>标签，两者都有routerLink属性，

我面临的问题是，内部<a>路线不起作用

<a [routerLink]="[ './comp1']">
    Comp1
    <a [routerLink]="['./comp2']">
        Navigate to comp2 (Nested)
    </a>
</a>

如果我将它分开，这将起作用

<div>
    <a [routerLink]="['./comp2']">
        Navigate to comp2 (Not Nested)
    </a>
</div>

我也尝试了下面的代码，但仍然相同

<a [routerLink]="[ './comp1']">
    Comp1
    <a [routerLink]="['./comp2']" (click)="$event.preventDefault()>
        Navigate to comp2 (Nested)
    </a>
</a>

将a标签更改为跨度也不能解决问题

<span [routerLink]="[ './comp1']" >
    Comp1
    <span [routerLink]="['./comp2']" (click)="$event.preventDefault()">
        Navigate to comp2 (Nested)
    </span>
</span>

这是它的https://stackblitz.com/edit/angular-nested-router