0%

Posted on Edited on In Views: Valine:
Symbols count in article: 5.7k Reading time ≈ 5 mins.

在angular中共有三种指令：

  • 组件（特殊的指令）
  • 结构指令，通过添加或移除DOM元素来更改DOM布局
  • 属性指令，改变元素、组件或其他组件的外观或行为

属性指令修改一个元素的外观或行为。

Read more »

Posted on Edited on In Views: Valine:
Symbols count in article: 2.5k Reading time ≈ 2 mins.

组件交互，也就是多个组件之间共享信息。

输入类型-父组件传到子组件

可以用输入类型的装饰器@input来讲子组件的属性标记为是输入类型。

1
2
3
4
5
6
7
8
9
10
import { Component, OnInit, Input, Output } from '@angular/core';

export class HeroDetialComponent implements OnInit {
  @Input() hero: Hero;
  @Input('index') i: number;

  selectThisHero(hero: Hero): void {
    this.selectHero = hero;
  }
}
Read more »

Posted on Edited on In Views: Valine:
Symbols count in article: 1k Reading time ≈ 1 mins.

最近在学习ng2，正巧博客也从wordpress换到了hexo，使用下来觉得还挺好的。

angular的模板语法使用两个大括号来表示的{{}}，然后我的博客又整理的是学习笔记，那么自然不可避免的在博客中会插入代码，所以出现了这个问题：

1
2
Unhandled rejection Template render error: (unknown path) [Line 4, Column 148]
  unexpected token: }}
Read more »

Posted on Edited on In Views: Valine:
Symbols count in article: 5k Reading time ≈ 5 mins.

TypeScript中的基本类型

布尔值 boolean

let isDone: boolean = false;

数字 number

和JavaScript一样，所有的数字都是浮点数 let score: number = 88;

Read more »

Posted on Edited on In Views: Valine:
Symbols count in article: 3.5k Reading time ≈ 3 mins.

内置指令，分为属性型指令和机构型指令。

内置属性型指令

属性型指令通常会监听和修改其他html元素或组件的行为、元素属性（Attribute）、DOM属性（Property）。

几个常见的属性型指令：

  • NgClass 添加或移除一组css类
  • NgStyle 添加或移除一组css样式
  • NgModle 双向绑定到html表单元素
Read more »

Posted on Edited on In Views: Valine:
Symbols count in article: 6.3k Reading time ≈ 6 mins.

html是angular模板的语言。几乎所有的html语法都是有效的模板语法。需要注意两点

  • <script>元素，被禁用了，以阻止脚本注入的风险。
  • <html> <body> <base>没有任何作用。
Read more »

Posted on Edited on In Views: Valine:
Symbols count in article: 2.2k Reading time ≈ 2 mins.

目前为止，我们的所有组件都是在app下面，并以app.module.ts为壳做加载。对于小应用是不受影响的，但是一旦需求复杂，组件变多的时候维护起来很困难，所以我们需要创建子模块来管理我们划分的子业务。

在app文件夹下面创建子模块：hero

1
ng generate module hero
Read more »

Posted on Edited on In Views: Valine:
Symbols count in article: 3.9k Reading time ≈ 4 mins.

路由器使用浏览器的history.pushState进行导航，正因为有它，我们才可以按照期望的样子显示应用内部的url路径。这种风格也就是“html5风格url”。

我们必须往本应用的index.html中添加一个<base href>元素，这样pushState才能正常工作。也就是告诉浏览器，以当前页面为应用的基底。

Read more »

Posted on Edited on In Views: Valine:
Symbols count in article: 2.3k Reading time ≈ 2 mins.

angular应用：

用angular扩展语法编写html模板，用组件类管理这些模板，用服务添加应用逻辑，用模块打包发布组件和服务。

通过引导模块来启动应用，angular在浏览器中接管、展现应用的内容，并根据提供的指令响应用户的交互。

Read more »

Posted on Edited on In Views: Valine:
Symbols count in article: 5.8k Reading time ≈ 5 mins.

在canvas中画图其实也和现实中的画图是一样的，只不过是我们要告诉机器来怎么画。比如我们使用2b铅笔画了一条三厘米的直线，那么转换成canvas能识别的语言就是，我们拿了个什么颜色的笔strokeStyle，笔的线宽lineWidth，以及开始点和结束点，按照这样一系列的指令，canvas就可以画出我们想要的图形了。我们来看下具体的基本图形的使用。

Read more »