angular路由 和 router-outlet

path

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

pathMatch

prefix:以指定的路径开头;

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

参考

路由跳转

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

router-outlet

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

Home About Dashboard

再来看个例子

<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>

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

总结

子组件

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

把RouteRoutingModule放到RoutesModule里

把RoutesModule导入AppModule，程序入口

在Main.ts里面导入AppModule

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