[Angular] Router outlet events
For example, we have a component which just simply render router-outlet:
import { Component } from '@angular/core'; @Component({
selector: 'mail-app',
styleUrls: ['mail-app.component.scss'],
template: `
<div class="mail">
<router-outlet></router-outlet>
</div>
`
})
export class MailAppComponent {}
export const ROUTES: Routes = [
{ path: 'folder/:name', component: MailFolderComponent }
];
We can add events to router-outlet:
import { Component } from '@angular/core'; @Component({
selector: 'mail-app',
styleUrls: ['mail-app.component.scss'],
template: `
<div class="mail">
<router-outlet
(activate)="onActivate($event)"
(deactivate)="onDeactivate($event)"
></router-outlet>
</div>
`
})
export class MailAppComponent {
onActivate(event) {
console.log(event)
} onDeactivate(event) {
console.log(event)
}
}
When we log out the, we see the actual component been rendered into the router-outlet.
[Angular] Router outlet events的更多相关文章
- 使用Angular Router导航基础
名称 简介 Routes 路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件. RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令. Router ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- [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. ...
- MVC route 和 Angular router 单页面的一些方式
直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...
- [Angular 2] Using events and refs
This lesson shows you how set listen for click events using the (click) syntax. It also covers getti ...
- [Angular] Progress HTTP Events with 'HttpRequest'
New use case that is supported by the HTTP client is Progress events. To receive these events, we cr ...
- angular router ui bug !
https://github.com/angular-ui/ui-router/issues/600 https://github.com/angular-ui/ui-router/issues/22 ...
- [Angular] Adding keyboard events to our control value accessor component
One of the most important thing when building custom form component is adding accessbility support. ...
- [Angular2 Router] Setup page title with Router events
Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...
随机推荐
- 1.25 Python知识进阶 - 封装
封装 示例代码: class Role(object): count = 0 def __init__(self,name,role,weapon,life_value=100,money=15000 ...
- php学习笔记6
PHP 字符串变量 PHP 中的字符串变量 字符串变量用于包含有字符的值. 在创建字符串之后,我们就可以对它进行操作了.您可以直接在函数中使用字符串,或者把它存储在变量中. 在下面的实例中,我们创建一 ...
- (转)Tomcat目录结构
首先来了解一下Tomcat5.5的目录结构: /bin:存放windows或Linux平台上启动和关闭Tomcat的脚本文件 /conf:存放Tomcat服务器的各种全局配置文件,其中包括server ...
- 用两个栈实现队列与用两个队列实现栈(Python实现)
用两个栈实现队列: class QueueWithTwoStacks(object): def __init__(self): self._stack1 = [] self._stack2 = [] ...
- JavaScript学习总结(4)——JavaScript数组
JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组.ArrayList.Hashtable等的超强综合体. 一.数组的声明 常规方式声明: ...
- web.xml的配置及加载顺序
一web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> ...
- 玩转Bootstrap(基础) -- (6.导航条基础)
1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- 13.Zookeeper的java客户端API使用方法
转自:https://blog.csdn.net/jiuqiyuliang/article/details/56012027
- 2.Web开发过程流程图
转自:https://blog.csdn.net/hello_simon/article/details/19993343 最近公司在进行一系列新模块的开发,在痛苦开发的过程中,大家不时在一起进行总结 ...
- 1.IntelliJ IDEA搭建SpringBoot的小Demo
转自:http://www.cnblogs.com/weizaibug/p/6657077.html 首先简单介绍下Spring Boot,来自度娘百科:Spring Boot是由Pivotal团队提 ...