使用Angular Router导航基础
名称 |
简介 |
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导航基础的更多相关文章
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- Angular路由——路由基础
一.路由相关对象 Router和RouterLink作用一样,都是导航.Router是在Controller中用的,RouterLink是在模版中用到. 二.路由对象的位置 1.Routes对象 配置 ...
- Angular+Bootstrap3导航菜单
Angular+Bootstrap3导航菜单 AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀 ...
- Angular Route导航
我们用Angular cli创建带有路由的新项目 ng new router --routing Angular Routes API文档 Angular的文档中有详细的解释: 1)https://a ...
- angular学习-入门基础
angular .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1px solid #00 ...
- MVC route 和 Angular router 单页面的一些方式
直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...
- angular 实现导航ng-click切换
angular写的导航.自学angular已有一段时间. <!doctype html><html lang="en"><head> <m ...
- Angular学习笔记—基础(转载)
创建简单组件 新建组件 $ ng generate component simple-form --inline-template --inline-style # Or $ ng g c simpl ...
- [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. ...
随机推荐
- wpf GifBitmapDecoder 解析 gif 格式
在网上有很多图片都是gif,那么如何在 wpf 解析 gif? 本文告诉大家如何使用 GifBitmapDecoder 把gif分开为一张一张,获得他的信息. 如果需要把一个 gif 分开,使用的代码 ...
- Servlet 笔记-异常处理
当一个 Servlet 抛出一个异常时,Web 容器在使用了 exception-type 元素的 web.xml 中搜索与抛出异常类型相匹配的配置. 必须在 web.xml 中使用 error-pa ...
- MySQL数据库主从复制实践
MySQL 主从(MySQL Replication),主要用于 MySQL 的实时备份.高可用HA.读写分离.在配置主从复制之前需要先准备 2 台 MySQL 服务器. 一.MySQL主从原 ...
- LeetCode 604. Design Compressed String Iterator (设计压缩字符迭代器)$
Design and implement a data structure for a compressed string iterator. It should support the follow ...
- PhiloGL学习(4)——三维对象、加载皮肤
前言 上一篇文章中介绍了如何响应鼠标和键盘事件,本文介绍如何加载三维对象并实现给三维对象添加一个漂亮的皮肤. 一. 原理分析 我对三维的理解为:所谓三维对象无非是多个二维对象拼接到一起,贴图就更简单了 ...
- idea 创建多模块依赖Maven项目
本来网上的教程还算多,但是本着自己有的才是自己的原则,还是自己写一份的好,虽然可能自己也不会真的用得着. 1. 创建一个新maven项目 2. 3. 输入groupid和artifactid,后面步骤 ...
- Java并发编程--线程池
1.ThreadPoolExecutor类 java.uitl.concurrent.ThreadPoolExecutor类是线程池中最核心的一个类,下面我们来看一下ThreadPoolExecuto ...
- c#public、private、protected、internal、protected internal修饰符及访问权限
c#public.private.protected.internal.protected internal修饰符及访问权限 public 公有访问.不受任何限制. private 私有访问.只限于本 ...
- Linux学习(十二)mkpasswd、su、sudo、限制root远程登录
一.mkpasswd mkpasswd用来生成随机密码字符串.可以指定长度和特殊字符的长度: [root@ruanwenwu01 ~]# mkpasswd O7.alw5Wq [root@ruanwe ...
- 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 / ...