Как направить компонент на другой, не показывая первый- угловой

Question

У меня проблема, когда я загружаю первый компонент и пытаюсь связать его с другими компонентами, первый, первоначальный компонент стремится остаться вместе с остальными. В основном, объединенные компоненты.

Я сейчас пытаюсь закодировать первый, поэтому он сразу же при загрузке перенаправляется на главную страницу.

Если бы я сначала загрузил главную страницу, то всякий раз, когда я переходил на другую страницу с главной страницы, главная страница оставалась. Слияние главной страницы и страницы, на которую я перешел.

Мне кажется, что 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

Answer 1

Должен быть компонент контейнера, в который вложены другие компоненты

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}

Answer 2

Я нашел решение: ОШИБКА Ошибка: Uncaught (в обещании), не может соответствовать ни один маршрут. Сегмент URL

Похоже, мне просто нужно было поставить / в моем routerLink перед указанием пути.

Программист говорит: «Чем больше времени вы тратите на ошибку, тем меньше она». верно.

Спасибо, что попробовали всех!