时间戳

首页 > 解决方案 > 如何在不显示第一个的情况下将一个组件路由到另一个？- 角

angular - 如何在不显示第一个的情况下将一个组件路由到另一个？- 角

问题描述

当我加载第一个组件并尝试将其链接到其他组件时遇到问题，第一个初始组件往往与其他组件保持一致。基本上，合并的组件。

我现在正在尝试编写第一个代码，所以当它加载时，它会立即路由到主页。

如果我先加载主页，那么每当我从主页转到另一个页面时，主页都会保留。合并主页面和我去的页面。

我觉得 Angular 应该自动执行此操作以阻止这种情况发生。

代码

第一个组件。

    <!-- Pesdo Example -->
    <a onload="anotherComponent">

或者，如果我可以让 routerLink 以某种方式立即链接到另一个而无需单击。我知道 onLoad 用于脚本。

第二

    <div class="background">

      <div class="logo">
        <img src="/images/logo.png" alt="Foo Logo">

        <br><br>
        <h1 class="title">Foo App</h1>
      </div>

      <div class="options">
        <h2>Foo</h2>
        <a><button class="button">Foo 1</button></a>
        <a><button class="button">Foo 2</button></a>
      </div>
    </div>



app.module.ts file

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { MainMenuComponent } from './main-menu/main-menu.component';
    import { NavComponent } from './nav/nav.component';

    @NgModule({
      declarations: [
        AppComponent,
        MainMenuComponent,
        NavComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }


Routes

    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { MainMenuComponent } from './main-menu/main-menu.component';

    const routes: Routes = [
      { path: "main", component: MainMenuComponent },
    ];

app.component.html

    <app-nav></app-nav>

    <section>
      <router-outlet></router-outlet>
    </section>

Thanks!


EDIT: 

I can now load up the first component but now routerLink does not work to route to other components.

    <section>
      <router-outlet></router-outlet>
    </section>


const routes: Routes = [
  { path: "", pathMatch: "full",  redirectTo: "home"},
  { path: "Contact", pathMatch: "full", redirectTo: "contact" },
  { path: "Settings", pathMatch: "full", redirectTo: "settings" },

  { path: 'contact', component: MainFormComponent },
  { path: 'home', component: ListOfPeopleComponent },
  { path: 'settings', component: EditAPersonComponent },
];

Neither the names from BOTH PATHS work for router link.

<a routerLink="Settings"></a> <a routerLink="settings"></a> both do not work.



EDIT: My console outputs this.

[![enter image description here][1]][1]

Please copy and paste the link, I do now know why SO is displaying all this text as code. Thanks.

  [1]: https://i.stack.imgur.com/TNOT5.png

标签： angularroutingcomponents

解决方案

应该有一个容器组件，其中嵌套了其他组件

app.component.ts

<div class="app-container">
  <router-outlet></router-outlet>
</div>

然后根据当前路线，<router-outlet>应该显示您要显示的组件。您可以使用您定义的路由重定向RouterModule

  { path: "", pathMatch: "full", redirectTo: "home" },
  { path: "home", component: HomeComponent },
  { path: "settings", component: SettingsComponent}

推荐阅读