Question

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

我尝试使用routerlink在应用程序组件html（root html）中显示另一个html。下面是appcomponent 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”时，仪表板html会附加在该区域中，但是我希望仪表板html完全覆盖应用程序组件html的内容。

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

Answer 1

您可以尝试通过将上述内容添加到名为Navigation的新HTML中来创建新组件，并在需要时将其放置

请让您app.component.html尽可能为空

Answer 2

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

# small differences per numeric imprecision
[[ 2.77555756e-17  0.00000000e+00 -5.55111512e-17 -1.38777878e-17]
 [-2.77555756e-17  2.77555756e-17  0.00000000e+00 -1.38777878e-17]
 [ 0.00000000e+00 -5.55111512e-17  0.00000000e+00 -2.77555756e-17]
 [-1.11022302e-16  2.08166817e-17  2.22044605e-16  0.00000000e+00]
 [ 0.00000000e+00  0.00000000e+00  0.00000000e+00  0.00000000e+00]
 [-5.55111512e-17  2.77555756e-17 -1.11022302e-16  5.55111512e-17]
 [ 0.00000000e+00  0.00000000e+00  0.00000000e+00 -2.77555756e-17]
 [ 0.00000000e+00  0.00000000e+00  0.00000000e+00 -5.55111512e-17]
 [ 0.00000000e+00 -3.46944695e-17 -2.77555756e-17  1.11022302e-16]
 [-5.55111512e-17  5.55111512e-17  0.00000000e+00  1.11022302e-16]]

-http://localhost:4200/重定向到-> http://localhost:4200/home/login -因此，在正确登录后-> http://localhost:4200/home/dashboard

您必须记住，AppComponent.html必须具有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 } ];标签，以便为要加载的子项设置占位符。

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

2 个答案: