名称

简介

Routes

路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件。

RouterOutlet

在HTML中标记路由内容呈现位置的占位符指令。

Router

负责在运行时执行路由的对象,可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定路由。

routerLink

在HTML中申明路由导航用的指令。

ActivatedRoute

当前激活的路由对象,保存着当前路由的信息,如路由地址,路由参数等。

实例:

1.创建一个Angular Router项目;(ng new Router -routing)

2.新建两个组件home和product;

  ng g component home

  ng g component product

完成后项目结构截图

3.配置app.routing.module.ts文件如下

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeeComponent} from "./homee/homee.component";
import {ProductComponent} from "./product/product.component"; const routes: Routes = [
{path: '', component: HomeeComponent},
{path: 'product', component: ProductComponent}
]; @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

4.修改app.component.html文件如下

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/']">主页</a>
<a [routerLink]="['/product']">商品详情</a> <router-outlet></router-outlet>

保存,运行,angular router导航基础完成

使用Angular Router导航基础的更多相关文章

  1. [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

    前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...

  2. Angular路由——路由基础

    一.路由相关对象 Router和RouterLink作用一样,都是导航.Router是在Controller中用的,RouterLink是在模版中用到. 二.路由对象的位置 1.Routes对象 配置 ...

  3. Angular+Bootstrap3导航菜单

    Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...

  4. Angular Route导航

    我们用Angular cli创建带有路由的新项目 ng new router --routing Angular Routes API文档 Angular的文档中有详细的解释: 1)https://a ...

  5. angular学习-入门基础

    angular .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #00 ...

  6. MVC route 和 Angular router 单页面的一些方式

    直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...

  7. angular 实现导航ng-click切换

    angular写的导航.自学angular已有一段时间. <!doctype html><html lang="en"><head> <m ...

  8. Angular学习笔记—基础(转载)

    创建简单组件 新建组件 $ ng generate component simple-form --inline-template --inline-style # Or $ ng g c simpl ...

  9. [Angular Router] Lazy loading Module with Auxiliary router

    Found the way to handle Auxiliary router for lazy loading moudle and erge load module are different. ...

随机推荐

  1. wpf GifBitmapDecoder 解析 gif 格式

    在网上有很多图片都是gif,那么如何在 wpf 解析 gif? 本文告诉大家如何使用 GifBitmapDecoder 把gif分开为一张一张,获得他的信息. 如果需要把一个 gif 分开,使用的代码 ...

  2. Servlet 笔记-异常处理

    当一个 Servlet 抛出一个异常时,Web 容器在使用了 exception-type 元素的 web.xml 中搜索与抛出异常类型相匹配的配置. 必须在 web.xml 中使用 error-pa ...

  3. MySQL数据库主从复制实践

        MySQL 主从(MySQL Replication),主要用于 MySQL 的实时备份.高可用HA.读写分离.在配置主从复制之前需要先准备 2 台 MySQL 服务器. 一.MySQL主从原 ...

  4. LeetCode 604. Design Compressed String Iterator (设计压缩字符迭代器)$

    Design and implement a data structure for a compressed string iterator. It should support the follow ...

  5. PhiloGL学习(4)——三维对象、加载皮肤

    前言 上一篇文章中介绍了如何响应鼠标和键盘事件,本文介绍如何加载三维对象并实现给三维对象添加一个漂亮的皮肤. 一. 原理分析 我对三维的理解为:所谓三维对象无非是多个二维对象拼接到一起,贴图就更简单了 ...

  6. idea 创建多模块依赖Maven项目

    本来网上的教程还算多,但是本着自己有的才是自己的原则,还是自己写一份的好,虽然可能自己也不会真的用得着. 1. 创建一个新maven项目 2. 3. 输入groupid和artifactid,后面步骤 ...

  7. Java并发编程--线程池

    1.ThreadPoolExecutor类 java.uitl.concurrent.ThreadPoolExecutor类是线程池中最核心的一个类,下面我们来看一下ThreadPoolExecuto ...

  8. c#public、private、protected、internal、protected internal修饰符及访问权限

    c#public.private.protected.internal.protected internal修饰符及访问权限 public 公有访问.不受任何限制. private 私有访问.只限于本 ...

  9. Linux学习(十二)mkpasswd、su、sudo、限制root远程登录

    一.mkpasswd mkpasswd用来生成随机密码字符串.可以指定长度和特殊字符的长度: [root@ruanwenwu01 ~]# mkpasswd O7.alw5Wq [root@ruanwe ...

  10. mysql启动时报错:Starting MySQL... ERROR! The server quit without updating PID file (/opt/mysql/data/mysql.pid) 的解决方法

    出现问题的可能性 1.可能是/opt/mysql/data/数据目录mysql用户没有权限(修改数据目录的权限) 解决方法 :给予权限,执行  "chown -R mysql.mysql / ...