Question

在尝试学习角度路由和导航时，我触及了该导航部分。

我的角组件结构：

AppComponent
    -LandingPage
    -WhatEver1
     -Home
     -Price
     -Sales
    -WhatEver2
     -Blog
     -ContactUs

我的路线：

const appRoutes: Routes = [
  {path: '', component: LandingPageComponent},
  {path: 'whatever-1', component: WhateverComponent},
  {path: 'whatever-2', component: Whatever2Component}
];

我尝试在登录页面上有两个按钮，以便每个按钮都可以导航到组件之一。

目标网页的HTML部分：

<div class="row">
    <button class="btn btn-primary" (click)="redirectToTravelLife()">Travel Life</button>
    <button class="btn btn-warning" (click)="redirectToSoftwareLife()">Software Life</button>
  </div>

  <div class="row">
    <router-outlet></router-outlet>
  </div>

TypeScript代码：

constructor(private router: Router) {}

  redirectToSoftwareLife() {
      this.router.navigateByUrl('/whatever-1');
  }
  redirectToTravelLife() {
      this.router.navigateByUrl('/whatever-2');
  }

导航正在进行中，但按钮仍然存在。如何进行正确的导航，以便我重定向到的任何组件都仅出现该组件及其子组件。

Answer 1

着陆页html组件存在问题。您的按钮是该页面的静态部分，而路由器的出口是动态的。路由器出口充当小丑，这意味着在您的情况下，当您单击其中一个按钮时，按钮将始终可见，并且只有组件的路由器出口部分会动态变化。

您需要使用按钮来分离组件（我们将其称为LandingPageComponent），并使用2个分离的组件（Whathever1Component和Whatever2Component）。

您的路由器模块应具有如下所示的路由：

const routes: Routes = [
    {path: 'landingpage', component: LandingPageComponent},
    {path: 'whatever-1', component: Whatever1Component},
    {path: 'whatever-2', component: Whatever2Component}
];

现在您将拥有不带路由器出口的登录页面，因此，当您单击按钮时，您将被重定向到WhateverComponent或Whatever2Component，并且当然不显示任何按钮！

希望这会有所帮助！

编辑：

关于您的评论（“我应将我的应用着陆页保存在哪里”），这就是您需要的：您的应用程序组件应具有路由器出口。在该路由器出口内，将呈现应用程序的其他部分（着陆页，what1、1，what2，...），您将需要具有我已经编写的路由结构。您无需将应用程序着陆页放在任何地方，您已经通过路线将其包括在内。因此，当您转到路线/着陆页时，将渲染该组件。示例：

app.component.html：

<div>
    <router-outlet></router-outlet>
</div>

app-routing.module.ts：

...
const routes: Routes = [
    {path: '', redirectTo: 'landingpage', pathMatch: 'full'},
    {path: 'landingpage', component: LandingPageComponent},
    {path: 'whatever-1', component: Whatever1Component,
    children: [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent},
        { path: 'price', component: PriceComponent },
        { path: 'sales', component: SalesComponent }
    ]},
    {path: 'whatever-2', component: Whatever2Component,
    children: [
        { path: '', redirectTo: 'blog', pathMatch: 'full' },
        { path: 'blog', component: BlogComponent},
        { path: 'contactus', component: ContactComponent }
    ]}
   ];
...

Answer 2

使用navigateByUrl导航时，它将<router-outlet></router-outlet>中的内容替换为目标组件。

为了完成您的任务，您需要将按钮分成另一个组件（可能类似于NavComponent）。

 const appRoutes: Routes = [
  {path: '', redirectTo: 'nav', pathMatch: 'full'},
  {path: 'nav', component: NavComponent},
  {path: 'whatever-1', component: WhateverComponent},
  {path: 'whatever-2', component: Whatever2Component}
];

以上路由会将/重定向到/nav。因此它将始终将按钮显示为登录页面。

HTH。

Answer 3

根据您要从父组件重定向到子组件的组件结构，您好。根据您的组件结构

-LandingPage
-WhatEver1
 -Home
 -Price
 -Sales
-WhatEver2
 -Blog
 -ContactUs

当某些路由只能在其他路由中访问和查看时，将它们创建为子路由可能是适当的。您需要配置以下结构。

export const routes: Routes = [
  { path: '', redirectTo: 'LandingPage', pathMatch: 'full' },
  { path: 'LandingPage', component: LandingPageComponent },
  { path: 'WhatEver1', component: WhatEver1Component,
  children: [
     { path: '', redirectTo: 'Home', pathMatch: 'full' },
     { path: 'Home', component: HomeComponent},
     { path: 'Price', component: PriceComponent },
     { path: 'Sales', component: SalesComponent }
  ]
 }
];

Angular：从组件重定向到组件

3 个答案: