标签: angular-router

为什么id在后卫中不可用？

@Injectable()
export class ProjectDetailsGuard implements CanActivate {

    constructor(private activatedRoute: ActivatedRoute) { }

    canActivate() {
        const id = this.activatedRoute.snapshot.params['id'];

        console.log(id); // <-- undefined
    }

}

在组件内部实现时，相同的代码可以完美地工作。

我有以下文件:

• app.module.ts
• APP-routing.module.ts
• projects.module.ts
• 项目-routing.module.ts

Projects模块是app模块的子模块.我在app模块中包含项目模块的路由,并在构建期间收到以下错误:

ERROR in无法解决"... app-routing.module.ts"中的"项目".

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BreadcrumbModule } from 'angular-crumbs';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { ProjectsModule } from './projects/projects.module';
import { ProjectModule …

我正在尝试将新菜单项添加到默认生成的JHipster应用程序中.我顺便使用Angular 4.

我面临的问题是我总是得到以下错误.

错误:未捕获(在承诺中):错误:无法匹配任何路由.网址细分:'用户资料'

以下是我添加的代码.

首先,我在src/main/webapp/app下添加了一个名为user-profile的文件夹.

在其中,我添加了index.ts,user-profile.component.html,user-profile.component.ts和user-profile.route.ts

index.ts的内容

export * from './user-profile.component';
export * from './user-profile.route';

user-profile.component.ts的内容

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

@Component({
    selector: 'jhi-user-profile',
    templateUrl: './user-profile.component.html'
})
export class UserProfileComponent implements OnInit {
    account: Account;

    constructor(private principal: Principal) {}

    ngOnInit() {
        this.principal.identity().then((account) => {
            this.account = account;
        });
    }
}

user-profile.route.ts的内容

import { Route } from '@angular/router';

import { UserRouteAccessService } from '../shared';
import { UserProfileComponent } from './';

export const …

如果我们使用<router-outlet>组件(任何组件)然后将a放到routerLink该组件中的另一个组件,链接是否始终呈现链接到<router-outlet>当前活动组件的组件？

换句话说,组件routerLink属性是否始终与<router-outlet>组件内部配对？

我有一个ListComponent需要在 2 个模块中使用的组件，其中一个是延迟加载的。所以我创建了声明 ListComponent 的 SharedModule。ListComponent 使用该routerLink指令，因此它需要 RouterModule。所以我导入了RouterModule，导致了这个错误。

core.js:1598 错误错误：未捕获（承诺）：错误：RouterModule.forRoot() 调用了两次。延迟加载的模块应该使用 RouterModule.forChild() 代替。

全局搜索显示我只打了RouterModule.forRoot一次电话。我的延迟加载模块调用RouterModule.forChild并且是唯一的其他路由模块。

我使用完全相同的设置创建了一个 stackblitz，但无法重现该问题。它确实有效。尽管如此，我还是不明白我的项目有什么不同。https://stackblitz.com/edit/angular-shared-component-b

我正在努力实现以下目标：

1. 我有一个mat-toolbar组件，app.component.html用于显示网站的主要顶部导航栏。工具栏下面是<router-outlet></router-outlet>。
2. 当用户导航到localhost:4200/我的根目录时，我希望顶部导航栏可见，并且与导航栏中的链接关联的所有组件都呈现在顶部导航栏下方。
3. 现在的问题是，当用户导航到根目录时，顶部导航栏会重复两次。单击链接，将删除重复的导航栏，并在导航栏下方呈现适当的组件（这是我希望的而无需重复）。

这里是 app.module.ts

// initialization and module imports
const RootRoutes: Routes = [
 {path: "", redirectTo: "root", pathMatch: "full"},
 {path: "root", component: AppComponent, },
 //{path: "home", component: HomeComponent },
 {path: "fiction", component: FictionDisplayComponent },
 {path: "nonfiction", component: NonFictionDisplayComponent},
 {path: 'poetry', component: PoetryDisplayComponent},
 {path: 'journal', component: JournalDisplayComponent},
 {path: 'letters', component: PersonalLetterDisplayComponent},
 {path: 'jokes', component: JokesDisplayComponent}
];
// NgModule declaration

这里是如何app.component.html的设置：

<div class="pure-g rr-main-wrapper">
    <div class="pure-u-5-5 home-top-navbar-wrapper">
        <rr-home-top-navbar></rr-home-top-navbar>
    </div> …

我正在尝试设置一个类似 的 URL 'user/:id/edit'，但是当我使用[routerLink]="['user/:id/edit', 1]"它时会生成/user/:id/edit/1.

如果我使用[routerLink]="['user/:id/edit', {id: 1}]"它会生成/user/:id/edit;id=1

有没有办法在/users/1/edit不使用字符串插值的情况下获得输出？

使用以下示例：

例子

重新加载页面时如何激活最后选择的选项卡？有没有这样做的设计模式？

谢谢

我正在使用 Angular 9。我在根目录中有一个 JSON 文件，我不想将其包含在应用程序中。换句话说：

/src
  |-- /app
  |-- /assets
  |-- index.html
  |-- do_not_include_this_file.json

这意味着http://example.com/do_not_include_this_file.json应该被 RouterModule 忽略，而是直接转到文件。目前该路径将重定向到 PageNotFoundComponent，例如

/src
  |-- /app
  |-- /assets
  |-- index.html
  |-- do_not_include_this_file.json

如何让 RouterModule 完全忽略路径？

这是在我的 routing.module 中：

{path: 'hero' component: HeroComponent}

这就是我通过路由传递对象的方式：

this.router.createUrlTree(['/hero', {my_object: this.Obj}]));
window.open(url, '_blank');

在我的英雄组件中，我读取对象如下：

this.route.snapshot.paramMap.get('my_object');

console.log(this.route.snapshot.paramMap.get('my_object');) 返回：

[Object object]

并读取对象的属性，例如.id返回：

undefined

如果我尝试使用它进行迭代，*ngFor我会得到：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'string'. NgFor only supports binding to Iterables such as Arrays.

为什么会这样？