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

再来看个例子

  

    

      

        
          Add coins
        
      
    
    
  



  

到底是怎么占位的呢？

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

Add coins

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

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

总结

子组件

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

把RouteRoutingModule放到RoutesModule里

把RoutesModule导入AppModule，程序入口

在Main.ts里面导入AppModule

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