如何完全替换 Angular 中的应用程序组件 html

Question

我们如何才能将应用程序组件html完全替换为另一个组件html？

我尝试使用 routerlink 在应用程序组件 html(root html) 中显示另一个 html。下面是应用程序组件 html 中的代码。

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href=#>Log In</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href=#>Sign Up</a></h2>
  </li>
  <li>
    <h2><a target="_parent" rel="noopener" routerLink="/dashboard">Continue</a></h2>
  </li>
  <li>
<h2><a target="_parent" rel="noopener" href="https://blog.angular.io/">Test</a></h2>
  </li>
</ul>
<router-outlet></router-outlet>

当我点击"Conitnue"时，dashboard html 被添加到该区域，但我期望的是dashboard html 完全覆盖app 组件html 的内容.

你能告诉我怎么做吗？谢谢

Answer 1

您可以尝试创建一个新组件，方法是将上述内容添加到新的 HTML 命名导航中，并在需要时放置它

让你app.component.html尽可能空着

Answer 2

经过一些研究和理解后的真正解决方案是正确应用父子路由...示例：

    const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: AppComponent, children: [
    {path: '', redirectTo: 'login', pathMatch: 'full'},
    {path: 'login', component: LoginComponent},
    {path: 'dashboard', component: DashboardComponent}
    ]
    },
    {path: '**', component: AppComponent }
    ];

- http://localhost:4200/ redirects to -> http://localhost:4200/home/login - 因此，正确登录 -> http://localhost:4200/home/dashboard

您必须记住，您的 AppComponent.html 必须有 <router-outlet></router-outlet> 标签才能为要加载的子项设置占位符。

如何完全替换 Angular 中的应用程序组件 html

How can I completely replace the app component html in Angular

angularjs

angular-ui-router