发表于: 2019-10-27 09:03:38

1 996


今天完成的事:阅读angular文档,

明天要完成的事:继续阅读angular文档,

难题:这个文档真的是要一点一点的看不能跳也不能直接看后面的必须要对其全都有所了解才行,难搞

收获:

一些基本的翻译:

import { Component } from '@angular/core';从“@angular/core”导入{component};

  selector: 'app-root',:selector:'应用程序根',简单理解就是css的选择器,实际就是容器的意思后面就是容器名

  template: 模板

public:公共的

let hero of heroes:把hero替换成heroes

export class AppComponent:导出 appcomponent

declarations:声明

bootstrap:引导程序

Module:模块

platformBrowserDynamic() :平台浏览器动态()


  • 带有双花括号的插值表达式 (interpolation) 来显示一个组件属性。

  • 用 ngFor 显示数组。

  • 用一个 TypeScript 类来为你的组件描述模型数据并显示模型的属性。

  • 用 ngIf 根据一个布尔表达式有条件地显示一段 HTML。

 在 Angular 中,组件扮演着控制器或视图模型的角色,模板则扮演视图的角色。




*ngFor 是一个 "结构型指令"。结构型指令会通过添加、删除和操纵它们的宿主元素等方式塑造或重塑 DOM 的结构。这个重构的意思应该是重复渲染一次。任何带有 * 的指令都是结构型指令。

*ngFor 会导致 <div> 被列表中的每个商品都重复渲染一次。


在预览窗格中,将鼠标悬停在显示的商品名称上,可以看到绑定的 name 属性值。它们俩是一样的。插值表达式 {{}} 允许你把属性值渲染为文本;而属性绑定语法 [] 则允许你在模板表达式中使用属性值

{{ product.name }}显示他的名字:或者说显示name 属性的插值

事件绑定是通过把事件名称包裹在圆括号 () 中完成的

现在添加这个链接,并使用属性绑定语法 [] 把该链接的 title 设置成该商品的名字,如下所示:

<a [title]="product.name + ' details'">

后面的details表示hover时显示的文字或者什么

,最后一个商品根本没有描述信息。由于该商品的 description 属性为空,因此不会创建 p 元素(包括静态文本 “Description”)。


然后开始安装angular时各种报错,报了3波错最后还把node环境换到了d盘,。。。



使用插值表达式显示组件属性

要显示组件的属性,最简单的方式就是通过插值表达式 (interpolation) 来绑定属性名。 要使用插值表达式,就把属性名包裹在双花括号里放进视图模板,如 {{myHero}}

使用 CLI 命令 ng new displaying-data 创建一个工作空间和一个名叫 displaying-data 的应用。


模板是包在 ECMAScript 2015 反引号 (`) 中的一个多行字符串。 反引号 (`) — 注意,不是单引号 (') — 允许把一个字符串写在多行上, 使 HTML 模板更容易阅读。


Angular 自动从组件中提取 title 和 myHero 属性的值,并且把这些值插入浏览器中。当这些属性发生变化时,Angular 就会自动刷新显示。

严格来说,“重新显示”是在某些与视图有关的异步事件之后发生的,例如,按键、定时器完成或对 HTTP 请求的响应。

使用 Hero 类

导入了 Hero 类之后,组件的 heroes 属性就可以返回一个类型化的Hero 对象数组了。

src/app/app.component.ts (heroes)

使用 ngFor 显示数组属性

要显示一个英雄列表,先向组件中添加一个英雄名字数组,然后把 myHero 重定义为数组中的第一个名字。

通过 NgIf 进行条件显示

Angular 的 ngIf 指令会根据一个布尔条件来显示或移除一个元素。 来看看实际效果,把下列语句加到模板的底部:

<p *ngIf="heroes.length > 3">There are many heroes!</p>



模板语法以及注意事项:

模板中的 HTML

HTML 是 Angular 模板的语言。几乎所有的 HTML 语法都是有效的模板语法。 但值得注意的例外是 <script> 元素,它被禁用了,以阻止脚本注入攻击的风险。(实际上,<script> 只是被忽略了。)

有些合法的 HTML 被用在模板中是没有意义的。<html>、<body> 和 <base> 元素这个舞台上中并没有扮演有用的角色。剩下的所有元素基本上就都一样用了。可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。


插值与模板表达式

插值能让你把计算后的字符串合并到 HTML 元素标签之间和属性赋值语句内的文本中。模板表达式则是用来供你求出这些字符串的。

插值表达式 {{...}}

所谓 "插值" 是指将表达式嵌入到标记文本中。 默认情况下,插值表达式会用双花括号 {{和 }} 作为分隔符。

在下面的代码片段中,{{ currentCustomer }} 就是插值表达式的例子。

<h3>Current customer: {{ currentCustomer }}</h3>

在括号之间的“素材”,通常是组件属性的名字。Angular 会用组件中相应属性的字符串值,替换这个名字。 上例中,Angular 计算 title 和 itemImageUrl 属性的值,并把它们填在空白处。 首先显示粗体的应用标题,然后显示英雄的图片。

一般来说,括号间的素材是一个模板表达式,Angular 先对它求值,再把它转换成字符串。


Angular 对所有双花括号中的表达式求值,把求值的结果转换成字符串,并把它们跟相邻的字符串字面量连接起来。最后,把这个组合出来的插值结果赋给元素或指令的属性。从表面上看,你就像是在元素标签之间插入了结果并对标签的属性进行了赋值。

(加法和js的加法差不多也有重载现象)

但是,插值其实是一个特殊语法,Angular 会把它转换为属性绑定。

如果你想用别的分隔符来代替 {{ 和 }},也可以通过 Component 元数据中的 interpolation 选项来配置插值分隔符。


他其实是把从基本的html到属性css到事件js在到组件和数据里面的区别慢慢的一点点的解释,不过似乎他的最大改变在html里然后向js方向一路衍生其实也不是很难主要就是有很多细节比较难记忆。。

关于绑定事件和绑定属性有一部分的区别:首先关于各自规范形式:

绑定事件:on-事件 

绑定属性:bind-属性

然后不是规范形式时:

绑定事件:使用(),

绑定属性:使用【】,


在事件绑定中,Angular 会为目标事件设置事件处理器。

当事件发生时,这个处理器会执行模板语句。 典型的模板语句通常涉及到响应事件执行动作的接收器,例如从 HTML 控件中取得值,并存入模型。

绑定会通过名叫 $event 的事件对象传递关于此事件的信息(包括数据值)。

事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件, $event 就是 DOM 事件对象,它有像 target 和 target.value 这样的属性。

使用 EventEmitter 实现自定义事件

通常,指令使用 Angular EventEmitter 来触发自定义事件。 指令创建一个 EventEmitter 实例,并且把它作为属性暴露出来。 指令调用 EventEmitter.emit(payload) 来触发事件,可以传入任何东西作为消息载荷。 父指令通过绑定到这个属性来监听事件,并通过 $event 对象来访问载荷。

假设 HeroDetailComponent 用于显示英雄的信息,并响应用户的动作。 虽然 HeroDetailComponent 包含删除按钮,但它自己并不知道该如何删除这个英雄。 最好的做法是触发事件来报告“删除用户”的请求。


双向数据绑定 ( [(...)] )

你经常需要显示数据属性,并在用户作出更改时更新该属性。

在元素层面上,既要设置元素属性,又要监听元素事件变化。

Angular 为此提供一种特殊的双向数据绑定语法:[(x)]。 [(x)] 语法结合了属性绑定的方括号 [x] 和事件绑定的圆括号 (x)


感觉自己越看越混乱,模板语句不能使用位运算符那   |  代表什么?师兄说这个叫分隔符、、、、

我去这就很骚气,没有位运算符单给你来一手分隔符。


返回列表 返回列表
评论

    分享到