【问题标题】:Angular router always redirecting to the same moduleAngular 路由器总是重定向到同一个模块
【发布时间】:2017-09-11 20:19:16
【问题描述】:

这快把我逼疯了。 我的应用模块中有 3 条简单的路由:

routes: Routes = [
    { path: '', redirectTo: '/customers', pathMatch: 'full' },
    { path: 'customers', loadChildren: './components/customer#CustomerModule' },
    { path: 'promotions', loadChildren: './components/promotion#PromotionModule'}
];

在我的客户模块中,我定义了这些路线:

routes: Routes = [
    {
        path: '', component: CustomerComponent, children: [
            { path: '', component: CustomerSearchComponent },
            { path: ':id', component: CustomerDetailComponent }
    ]}
];

在我的推广模块中:

routes: Routes = [
    { path: '', component: PromotionComponent },
    { path: 'new', component: PromotionNewComponent }
];

我的 AppComponent 和 CustomerComponent 中有一个 <router-outlet></router-outlet>。 问题是,当我要去路线 /promotions 时,我仍然会被重定向到 CustomerModule -> CustomerComponent -> CustomerSearch

为什么会这样?我想不通

编辑: 对于导航,我有一个标题组件,其中包含:

<ul class="nav navbar-nav">
            <li>
                <a [routerLink]="['./customers']"
                   routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                    Customers
                </a>
            </li>
            <li>
                <a [routerLink]="['./promotions']"
                   routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                    Promotions
                </a>
            </li>
        </ul>

应用组件是这样的:

<app-header></app-header>

<main class="container">
  <router-outlet></router-outlet>
</main>

【问题讨论】:

  • 您的导航如何?你在用routerLink吗?还是.navigate?这段代码是什么样的?
  • @DeborahK 我刚刚编辑了我的帖子。我用的是routerLink,但是地址栏输入url还是一样的
  • 您是否尝试过打开路线跟踪以查看是否可以深入了解正在发生的事情?
  • 是的,但这不是很有帮助。 “促销”路线是匹配的,但在树中它就像 AppComponent -> CustomerComponent -> CustomerSearchComponent
  • 因为你有一个静态链接,为什么不像这样省略括号:&lt;a routerLink='/user/bob'&gt;link to user component&lt;/a&gt;。也许这会有所帮助?

标签: angular routing angular2-routing


【解决方案1】:

我认为您需要指定完整路由,即使在功能模块路由中也是如此。

发生的事情是它进入您的客户路由并找到路径“+”并登陆 CustomerSearchComponent。

尝试将客户路由的基本路径更改为“客户”而不是“”,并将促销路由中的路径更改为“促销”和“促销/新”

【讨论】:

  • 它正在工作,但我不知道为什么我的代码没有。根据文档,路线正在增加。如果我在父组件中有“促销”,我不应该在子组件中重复它
  • 一开始我也很困惑,如果这样工作似乎会更好。我认为这些路由只有在它们相互嵌套时才会累加,就像在带有子数组的 Admin 路由对象中一样。当它从一个模块(即 AppModule)和另一个模块(即您的 PromotionModule)开始时,它似乎没有嵌套/累加
猜你喜欢
  • 2020-02-03
  • 1970-01-01
  • 1970-01-01
  • 2020-11-13
  • 2017-08-10
  • 1970-01-01
  • 2020-06-08
  • 2019-05-17
  • 1970-01-01
相关资源
最近更新 更多