Angular:Redirect 从组件到组件

Question

在我尝试学习angular路由和导航的过程中，我对导航部分进行了研究。

我的 Angular 组件结构：

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

当您使用 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 2

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

-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 }
  ]
 }
];

Answer 3

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

您需要有带按钮的独立组件（我们称之为 LandingPageComponent）和 2 个独立组件（Whatever1Component 和 Whatever2Component）。

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

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

现在您将拥有没有 router-outlet 的登录页面，因此当您单击该按钮时，您将被重定向到 WhateverComponent 或 Whatever2Component，当然不会呈现按钮！

希望对您有所帮助！

编辑：

关于您的评论 ("Where should i keep my app-landing-page")，这就是您需要的：您的应用程序组件应该有路由器插座。在该路由器插座内将呈现您应用程序的其他部分（登录页面，whatever1，whatever2，...）并且您将需要具有我已经编写的路由结构。您不需要将 app-landing-page 放在任何地方，您已经通过路由将其包含在内。因此，当您转到路线 /landingpage 时，该组件将被渲染。示例：

app.component.html:

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

应用-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 }
    ]}
   ];
...

Angular:Redirect 从组件到组件

Angular:Redirect From Component to Component

angular

angular-ui-router