发表于: 2021-06-03 21:15:28

0 1920


今天完成的事情: 模板语法;父子路由来实现页面的切换;JS知识巩固


明天计划的事情:渲染列表页数据;任务进行


遇到的问题:登录页数据请求到了,get 请求列表页数据还没有搞到,


收获:在 Angular 中,模板就是一块 HTML。在模板中,可以通过一种特殊语法来使用 Angular 的许多功能。

现在用到的知识:

插值 - 学习如何在 HTML 中使用插值和表达式。

文本插值允许你将动态字符串值合并到 HTML 模板中。通过插值,可以动态更改应用视图中显示的内容;插值是指将表达式嵌入到被标记的文本中。默认情况下,插值使用双花括号 {{ 和 }} 作为定界符。

ts 文件:currentCustomer = 'Maria';    

HTML文件:<h3>Current customer: {{ currentCustomer }}</h3>

Angular 会用相应组件属性的字符串值替换掉 currentCustomer。在这里,它的值是 Maria。

通过插值,Angular 执行以下任务:

  1. 计算所有位于双花括号中的表达式。
  2. 将这些表达式的结果转换为字符串。
  3. 将这些结果融入相邻的字符串文本中。
  4. 将融合后的结果赋值给元素或指令的属性。

语法:

  1. 赋值 (=+=, -=...)
  2. 运算符,比如 newtypeof 或 instanceof 等。
  3. 使用 ; 或 , 串联起来的表达式
  4. 自增和自减运算符:++ 和 --
  5. 不支持位运算,比如 | 和 & 


模板语句 - 响应模板中的事件。
模板语句是可在 HTML 中用于响应用户事件的方法或属性。使用模板语句,可以通过诸如显示动态内容或提交表单之类的动作吸引用户。

HTML文件中:<button (click)="deleteHero()">Delete hero</button> 当用户单击 Delete hero 按钮时,Angular 就会调用组件类中 deleteHero() 方法。

语法:模板语句解析器特别支持基本赋值 = 和带有分号 ; 的串联表达式。

不支持(不允许)以下语法:

  1. new
  2. 递增和递减运算符 ++ 和 --
  3. 赋值运算符,例如 += 和 -=
  4. 按位运算符,例如 | 和 &
  5. 管道操作符


绑定语法 - 使用绑定来协调应用程序中的值。

数据绑定会根据应用程序的状态自动使你的页面保持最新状态属性绑定 - 设置目标元素的属性或指令中带 @Input() 装饰器的属性。

属性(Attribute),类和样式绑定 - 设置属性、类和样式的值。


事件绑定 - 监听事件和 HTML。

通过事件绑定,你可以侦听并响应用户操作,例如按键、鼠标移动、点击和触摸。
要绑定到事件,要使用 Angular 的事件绑定语法。此语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成。
在下面的示例中,目标事件名是 click ,模板语句是 onSave() 。
<button (click)="onSave()">Save</button>
事件绑定侦听按钮的单击事件,并在发生单击时调用组件的 onSave ( )  。


双向绑定 - 在类及其模板之间共享数据。

(还有很多语法正在学习中!)


子路由的使用:

 // 引入各组件

import { MainComponent } from './main/main.component';

import { LoongComponent } from './loong/loong.component';
import { EnterComponent } from './enter/enter.component';
import { MyNavComponent } from './my-nav/my-nav.component';

const routes: Routes = [ // 组件的引入,实现路由跳转
  { path: ''pathMatch: 'full'redirectTo: 'enter' },
  { path: 'enter'component: EnterComponent }, // 登录页组件
  {
    path: 'my-nav'component: MyNavComponent, children: [ // 表单页面,主要内容页面的组件
      { path: 'loong'component: LoongComponent }, // 子组件(内容组件)
      { path: 'main'component: MainComponent }, // 子组件(欢迎页组件)
      { path: "**"component: MainComponent } // 默认进入父组件时所展现的组件内容
    ]
  },
  { path: '**'component: EnterComponent } // 页面加载后默认显示的组件内容
];

登陆成功,进入主页面(表单页面)时的子组件写法:

      <a mat-list-item [routerLink]="['/my-nav/loong']" [routerLinkActive]="['active']">Article列表</a>
      <a mat-list-item [routerLink]="['/my-nav/main']" [routerLinkActive]="['active']">个人信息</a>
      <a mat-list-item [routerLink]="['/my-nav/main']" [routerLinkActive]="['active']">Link 3</a>


JS知识,this 语法:this就是属性或方法“当前”所在的对象。

var person = {
  name: '张三',
  describe: function () {
    return '姓名:'+ this.name;
  }
};

person.describe()
// "姓名:张三"

上面例子this.name表示name属性所在的那个对象。由于this.name是在describe方法中调用,而describe方法所在的当前对象是person,因此this指向personthis.name就是person.name


由于对象的属性可以赋给另一个对象,所以属性所在的当前对象是可变的,即this的指向是可变的。

var A = {
  name: '张三',
  describe: function () {
    return '姓名:'+ this.name;
  }
};

var B = {
  name: '李四'
};

B.describe = A.describe;
B.describe()
// "姓名:李四"


function f() {
  return '姓名:'+ this.name;
}

var A = {
  name: '张三',
  describe: f
};

var B = {
  name: '李四',
  describe: f
};

A.describe() // "姓名:张三"
B.describe() // "姓名:李四"

上面代码中,函数f内部使用了this关键字,随着f所在的对象不同,this的指向也不同。


只要函数被赋给另一个变量,this的指向就会变。

var A = {
  name: '张三',
  describe: function () {
    return '姓名:'+ this.name;
  }
};

var name = '李四';
var f = A.describe;
f() // "姓名:李四"


还有很多有待学习!加油



















返回列表 返回列表
评论

    分享到