angular2
文章平均质量分 55
sanlingwu
这个作者很懒,什么都没留下…
展开
-
angular2入门概念
component(组件)是angular2中创建用户界面的主要构件。component直接继承自directive,它是给DOM附加行为的始祖。 脏值检测机制:执行digest循环,在特定UI组件的上下文中执行所注册的各种表达式。可以使用differ来优化脏值检测机制。 pipe(管道)是angular2中的另一个组件,可把它看成angularjs中的过滤器。 dire...原创 2018-02-10 10:18:46 · 233 阅读 · 0 评论 -
angular2父子组件之间传值
组件结构如下:main.html<div class="row"> <div class="col-sm-2 col-md-2 catalog"> <app-catalog [input]="catalogmsg" (event)="getData($event)"></app-catalog> &am原创 2018-07-03 20:30:31 · 6922 阅读 · 1 评论 -
angular2分页组件
创建一个分页包 pagination,然后在里面依次创建几个文件: page.component.html 分页组件的标签内容 page.conponent.ts 分页组件定义 pagination.ts 分页组件所需配置信息的对象 index.ts 导出分页组件page.component.html<!--分页组件的标签内容--><nav aria-label="Page n...转载 2018-04-19 14:24:27 · 1884 阅读 · 0 评论 -
angular2---ngFor指令及其简化
app.tsimport {Component} from '@angular/core';import {bootstrap} from '@angular/platform-browser-dynamic';@Component({ selector: 'app', templateUrl: './app.html',})class App { todos:string[...原创 2018-03-14 17:21:29 · 1477 阅读 · 0 评论 -
angular2组件定义(详细)
构建一个简单的to-do应用。to-do列表项格式如下:interface Todo { completed: boolean; label: string;}首先导入所有需要用到的模块:import {Component} from '@angular/core';import {bootstrap} from '@angular/platform-browser-d...原创 2018-03-17 20:31:19 · 921 阅读 · 0 评论 -
angular2指令定义(详细)
之前泛泛的以tooltip指令展示过如何定义指令,现在详细分解一下:在实现tooltip指令之前,需要从angular2/core里面导入一堆东西:import {HostListener, Input, Injectable, ElementRef, Inject, Directive, Component} from '@angular/core';解释几个类:ElementRef:这个类可以...原创 2018-03-17 19:38:01 · 1780 阅读 · 0 评论 -
angular2的第一个应用---Hello world!
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <app>&原创 2018-02-22 15:57:13 · 219 阅读 · 0 评论 -
angular2对于指令语法的改进
引入了一些更加简单的约定并且内置到了框架中:propertyName="value"[propertyName]="expression"(eventName)="handler()" 第一行propertyName属性的值可以接收一个字符串字面量,angular不会对这个值做进一步处理,这个值在模版里面是什么样就会怎么样去使用。 第二种将会提示angular2这个属性...原创 2018-03-15 12:18:05 · 147 阅读 · 0 评论 -
angular2+typescript的第一个应用---Hello world!
首页:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>原创 2018-02-28 11:06:19 · 256 阅读 · 0 评论 -
angular2中路由的定义
import {Component} from 'angular2/core';import {bootstrap} from 'amgular2/platform/browser';import {RouteConfig,ROUTER_DIRECTIVES,ROUTER_BINDINGS} from 'angular2/router';import {Home} from './comp...原创 2018-02-10 14:01:08 · 332 阅读 · 0 评论 -
angular2中指令、组件、管道、服务的定义
1 指令@Directive({ selector:'[tooltip]'})export class tooltip{ private overlay:Overlay; @Input() private tooltip:string; constructor(private el:ElementRef,manager:OverlayManager){...原创 2018-02-10 13:07:15 · 1766 阅读 · 0 评论 -
angular2通过路由进行组件间传值
一、传参在传值组件component.ts的constructor函数里面先声明router:import { Router} from '@angular/router';constructor(public router: Router,) {}1.routerLink单一参数:在<a routerLink=["/exampledetail",id]>&l...转载 2018-07-19 14:58:05 · 1319 阅读 · 0 评论