Angular学习笔记

一:学习记录

3, @viewchild()修饰器相关:

@ViewChild('myname'/ Component, {read: ViewContainerRef, static: true}) target : targetType;

  read参数的含义: https://stackoverflow.com/questions/37450805/what-is-the-read-parameter-in-viewchild-for/37476195#37476195

4, 动态组件:https://segmentfault.com/a/1190000011800979

5, 双向绑定

  • 自定义组件双向绑定最“简单”, 使用x和xChange事件, 即[(x)],原生的HTML元素不支持此类用法
  • 原生的HTML元素分为两类,一类是表单,可以直接使用[(ngModel)],框架会自动双向绑定【原因是Angular为所有的原生表单都提供了“值访问器”】,另一类是其他原生HTML元素,angular框架没有实现“值访问器”,而且不能使用x和xChange事件,所以如果想要双向绑定,只能使用[(ngModel)]然后自己实现值访问器。

6,

二:问题记录 

7, 自己写的两个模块,其中一个要用到第二个中的一些组件,如何写?  exports数组

8,单例应用?中的forRoot方法?


 

平时记录:

ng generate component list --prefix separate-setting ;

 


官网学习笔记

 一,组件与模板

1, 显示数据

  • 1, 组件的概念:一个带有 @Component()装饰器的类,和它的伴生模板关联在一起。组件类及其模板共同定义了一个视图。组件是指令的一种特例。@Component() 装饰器扩展了 @Directive() 装饰器,增加了一些与模板有关的特性。Angular 的组件类负责暴露数据,并通过数据绑定机制来处理绝大多数视图的显示和用户交互逻辑。
  • 1,可以使用指令来向模板中添加逻辑,指令告诉 Angular 在渲染页面时要如何修改。
  • 1,要显示组件的属性,最简单的方式就是通过插值 (interpolation) 来绑定属性名。 要使用插值,就把属性名包裹在双花括号里放进视图模板,如 {{myHero}}
  • 1, *ngFor="let hero of heroes" 中的 hero 叫做 模板输入变量
  • 1 可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。

2 模板语法:

  • 插值:插值是一种特殊语法,Angular 会将其转换为属性绑定。如果你想用别的分隔符来代替 {{ 和 }},也可以通过 Component 元数据中的 interpolation 选项来配置插值分隔符。
  • 模板表达式 (点此)
    • {{1+2}}中的1+2, 以及属性绑定 [attr]="1+2"等号右侧的1+2 叫做模板表达式
    • 模板表达式类似JavaScript代码,但是不能使用那些具有或可能引发副作用的 JavaScript 表达式(如赋值,new, 表达式链(;)等),也不能引用全局命名空间中的任何东西,比如 window 或 document。它们也不能调用 console.log 或 Math.max。 它们只能引用模板表达式上下文中的成员。假如该表达式调用了具有副作用的属性或方法,比如调用类似 getFoo() 的函数,只有你知道 getFoo() 做了什么。如果 getFoo() 更改了某些内容,而你恰巧绑定到该内容,则 Angular 可能会也可能不会显示更改后的值。Angular 可能会检测到更改并抛出警告错误。最佳实践是坚持使用属性和返回值并避免副作用的方法。
  • 表达式上下文:典型的表达式上下文就是这个组件实例,它是各种绑定值的来源。表达式中的上下文变量是由模板变量(1,模板输入变量;2,模板引用变量)、指令的上下文变量(如果有)和组件的成员叠加而成的。 如果你要引用的变量名存在于一个以上的命名空间中,那么,模板变量是最优先的,其次是指令的上下文变量,最后是组件的成员。
  • 模板表达式使用指南:
    • 属性名或方法调用应该是常态,但偶然使用逻辑取反 ! 也是可以的。 其它情况下,应该把应用程序和业务逻辑限制在组件中,这样它才能更容易开发和测试。
    • 模板表达式除了目标属性的值以外,不应该改变应用的任何状态。这条规则是 Angular “单向数据流”策略的基础。 永远不用担心读取组件值可能改变另外的显示值。 在一次单独的渲染过程中,视图应该总是稳定的。

  • 模板语句(点此):1 模板语句用来响应由绑定目标(如 HTML 元素、组件或指令)触发的事件。 模板语句将在事件绑定一节看到,它出现在 = 号右侧的引号中,就像这样:(event)="statement"。2 和模板表达式一样,模板语句使用的语言也像 JavaScript。 模板语句解析器和模板表达式解析器有所不同,特别之处在于它支持基本赋值 (=) 和表达式链 (;)。3 和表达式中一样,语句只能引用模板语句上下文中 —— 通常是正在绑定事件的那个组件实例。
  • 模板语句上下文:典型的语句上下文就是当前组件的实例。语句上下文可以引用模板上下文中的属性,如模板的$event对象,模板输入变量,模板引用变量 #heroForm (ngSubmit)="onSubmit(heroForm)"> ...
  • 模板语句使用指南:
    • 模板语句不能引用全局命名空间的任何东西。比如不能引用 window 或 document,也不能调用 console.log 或 Math.max。和表达式一样,避免写复杂的模板语句。 常规是函数调用或者属性赋值。

  • 数据绑定
    • 组件--->模板
      • 插值,属性(property),Attribute, CSS 类,样式;  
      • {{expression}}
        [target]="expression"
        bind-target="expression"

    • 模板---->组件
      • 事件
      • (target)="statement"
        on-target="statement"

    • 模板<---->组件
      • [(target)]="expression"
        bindon-target="expression"

    • 数据绑定的通用规则。数据绑定使用 DOM 元素、组件和指令的 Property,而不是 HTML 的Attribute 。
    • HTML attribute 与 DOM property 的对比。该通用规则可以帮助你建立 HTML Attribute 和 DOM Property 的思维模型: attribute 负责初始化 DOM property,然后完工。Property 值可以改变;Attribute 值则不能。

    • property 绑定: [target]="expression"
      • 方括号 [] 告诉 Angular 计算该模板表达式。如果省略括号,Angular 会将字符串视为常量,并使用该字符串初始化目标属性(property)。但有时候可以特意使用这种方式。
      • 属性property绑定和插值表达式 在属性值为字符串的情况下是可以通用的,如下面是等效的。但是属性值不为字符串时必须使用属性property绑定。

        is the interpolated image.


        is the property bound image.

        "{{interpolationTitle}}" is the interpolated title.


        "" is the property bound title.

      • 属性绑定会过滤

你可能感兴趣的:(Angular学习笔记)