admin管理员组

文章数量:1633915


path

一个用于匹配浏览器地址栏中URL的字符串。

pathMatch

prefix:以指定的路径开头;

full:与指定路径完全一样。

参考

路由跳转

this.router.navigate([‘url’,参数]);
this.router.navigateByUrl(‘url’);

router-outlet

参考
如果在浏览器的地址栏中添加 /about ，比如： http://localhost:4200/about
路由本应该会匹配地址，并显示 AboutComponent 。然而事实并非如此。我们需要告诉路由要在哪里显示这个AboutComponent组件。为了实现这个，需要在 aboutponent.html 的最后添加 元素，是 RouterModule 中的其中一个指令。
当然，在实际应用中，我们不会手动在地址栏中输入/about的， 而是通过 标签来实现。

再来看个例子

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li class="active">
        <a routerLink="create" routerLinkActive="active">
          Add coins
        </a>
      </li>    
    </ul>
  </div>
</nav>

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

到底是怎么占位的呢？

当点击 Add coins 这个 标签时，会激活

Add coins

这个时候， 以下的 div 区域会被替换：

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

这就是说， 如果想在哪个区域显示 createponent.html 这个子网页，只需要添加
就可以了。

总结

子组件

把子组件模板全部放到一个父组件模板里

把RouteRoutingModule放到RoutesModule里

把RoutesModule导入AppModule，程序入口

在Main.ts里面导入AppModule


在index.html里面引用App的组件，这个组件就包含了之前导入的全部组件

本文标签： 路由Angularoutletrouter

版权声明：本文标题：angular路由和router-outlet 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729178232a1188989.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。