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.

    • 属性绑定会过滤