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

Posted 2023-02-23

【中文标题】如何在不显示第一个组件的情况下将组件路由到另一个组件？ - 角

【英文标题】：How to route a component to another without displaying the first? - Angular

【发布时间】：2019-09-30 22:28:58

【问题描述】：

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

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

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

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

代码

第一个组件。

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

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

第二

    <div class="background">

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

        <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

【问题讨论】：

我们能看到你的 app.module.ts + 你的路由是在哪里定义的吗？

我已回滚您的编辑。不适合在标题中添加 (SOLVED) 或在您的问题中编辑解决方案。如果您发现下面的答案给了您答案，那么表明您的问题已解决的正确方法是通过选中该答案分数下方的标记来接受答案。如果您找到了其他解决方案并想分享，请在下方为此目的提供的空白处写下答案 - 请参阅Can I answer my own question?。

【参考方案1】：

我找到了解决方案：ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

看来我只需要在路径引用前面的routerLink 中添加一个/。

程序员说，“你花在错误上的时间越多，它就越小。”是真的。

感谢大家的尝试！

【讨论】：

很高兴您找到了解决方案。如果我可以详细说明：根据您发布的错误，该路由正在检查“mainMenu/settings”，因为它嵌套在 app.module.ts 的父路由配置中，因此 routerLink 是相对的，添加 / 使其成为绝对.

是的，确实如此。那是错误。它是相对的，程序找不到它，因为它是嵌套的。将其设为绝对是解决此问题的方法，因为浏览器无法找到相对路径，因为它不存在。

【参考方案2】：

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

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

【讨论】：

这个我已经知道了。这个答案对我没有帮助。我添加了代码给你看。

合并组件是什么意思？如果您正在寻找到特定组件的自动重定向，请删除 onload 代码并将此行添加到您的路线 path: "", pathMatch: "full", redirectTo: "main"

合并组件是指屏幕上显示的组件不止一个，而只有一个组件应该弹出。

你试过我的建议了吗？

是的，它可以加载第一个组件，但现在 routerLink 不起作用。它不能路由到其他组件。我将在我的问题中发布我的路线。