您的位置: 首页  >  文章  >  angular2 系列教程（二）组件

angular2 系列教程（二）组件

分类: 文章 • 2024-05-10 18:28:58

一. 组件

  1. 创建组件： ng g c login -it -is （完整写法： ng generate component login --inline-template --inline-style） 
    1. 其中“-it -is”代表生成组件的时候将HTML和CSS样式放在同一个文件中
    2. angular2 系列教程（二）组件
  2. 引用组件：在根组件的模版“app.component.html”中加入我们的组件引用 <app-login></app-login> 
  3. 组件组成：
    1. @Component
      1. selector ：定义引用时候的名称
      2. template：html模版
      3. styles：样式
      4. providers：配置要引用的类的实例，一般是service
    2. export class xxxComponent
  4. 编写template中的模版
    1. 事件绑定：
      1. 写法：（触发方式）=“触发函数”
      2. 例子：“ <button (click)="onClick()">Login</button>”（其中“onclick()”写在class中）
    2. 数据绑定：
      1. 分类：
        1. 本类中引用：
          1. 写法：在html标签中添加“#reference”，则reference代表这个标签
          2. 例子：angular2 系列教程（二）组件
            1. 注：上面例子，对应class中函数也要写对应参数接收值：“onClick(username){...}”
        2. 双向数据绑定：
          1. 在根模块" app.module.ts"中的imports中添加“FormsModule”
          2. 在xxxComponent中
            1. 在export class xxxComponent中添加成员变量
              1. 例子：“username : string”
            2. 在模版的html的标签中添加属性：[(ngModule)]=“username”（形象记法：banana-in-box）
            3. 引用方式是：“ this.成员变量”
              1. 例子：“this.username”
          3. 注意：
            1. 使用双向数据绑定之后，则事件绑定中的函数不需要再有接收参数，参数直接用“this.成员变量”即可，因为已经绑定了
            2. 当双向绑定后想要对表单数据进行验证时，改为 #reference="ngModel"，因为reference需要在模版中引用，如果不是，则不需要加
        3. 单向数据绑定：
          1. []="username" 是将方括号中的值赋值给username这个input控件
          2. ()="username" 是将username的值赋值给圆括号中的变量
    3. 差值表达式：
      1. 写法：{{表达式}}
      2. 应用场景：当表单需要进行验证的时候，在input标签中添加对应属性，然后用差值表达式对属性进行验证（双向绑定+引用）
        1. 例子：angular2 系列教程（二）组件
        2. 例子中添加了required，表示不能为必填项，本例如果不为空，差值表达式为true
  5. 将服务注入到组件中
    1. 创建服务：“ ng g s auth”
    2. 服务组成：
      1. @Injectable
        1. provideIn：
      2. export class xxxService
    3. 注入方式：
      1. 需要在组建中导入service类
        1. xxxComponent中：
          1. 导入service类：“import { AuthService } from '../core/auth.service';”
          2. 在装饰器中将其实例化：“constructor(private service: AuthService) { }”
      2. 不需要再组件中导入service类
        1. 在根模块" app.module.ts"中配置他的providers（providers作用是配置在模块中全局可用的service或参数）
          1. angular2 系列教程（二）组件
        2. xxxComponent中：
          1. 装饰器中引用全局可用的service“auth”：“constructor(@Inject('auth') private service) { }”
  6. 通过@Input和@Output在组件之间传值
    1. 父组件(a)给子组件(b)传值[email protected]
      1. 父组件调用子组件的时候传入数据，在组件a的模版中添加"<app-b [参数abc]="todos?.length"></app-b>"
      2. 在b组件bComponment中添加@Input用来接收a组件中传来的值
        1. angular2 系列教程（二）组件
      3. 子组件中使用父组件的数据“<h2>{{参数abc}}</h2>”
    2. 父子组件传值的方式，让子组件执行父组件的方法：
      1. 父组件定义方法
        1. angular2 系列教程（二）组件
      2. 调用子组件传入当前方法
        1. angular2 系列教程（二）组件
      3. 子组件接收父组件传过来的方法
        1. angular2 系列教程（二）组件
      4. 子组件使用父组件的方法
        1. angular2 系列教程（二）组件
    3. 子组件(b)通过@Output 执行父组件(a)的方法
      1. 在a组件的模版中添加"<app-b (事件abc)="addTodo()"></app-b>"
      2. 在b组件bComponment中添加@Output用来定义事件“@Output() 事件abc = new EventEmitter<string>();”
      3. angular2 系列教程（二）组件
    4. 父组件通过局部变量获取子组件的引用 ，主动获取子组件的数据和方法
      1. 定义子组件footer
        1. angular2 系列教程（二）组件
      2. 父组件调用子组件的时候给子组件起个名字
        1. angular2 系列教程（二）组件
      3. 直接获取执行子组件的方法
        1. angular2 系列教程（二）组件
    5. 父组件通过局部变量获取子组件的引用，通过ViewChild主动获取子组件的数据和方法
      1. 调用子组件，给子组件定义一个名称
        1. angular2 系列教程（二）组件
      2. 引入ViewChild，和刚才的子组件关联
        1. angular2 系列教程（二）组件
      3. 调用子组件
        1. angular2 系列教程（二）组件
  7. 管道
    1. 作用：将数据格式化显示，而不改变源数据
    2. 写法：“{{ 输入数据 | 管道 : 管道参数 }}”
    3. 注意：管道可以向jq一样链式调用：“{{ data | Pipe1 | Pipe2 | Pipe3 | ... }}”
    4. 自定义管道
      1. 步骤：
        1. 创建自定义管道：
          1. angular2 系列教程（二）组件
        2. 使用自定义管道：
          1. angular2 系列教程（二）组件
  8. 扩展
    1. 当form表单验证的时候
      1. 如果验证通过，则input的class是“.ng-valid”
      2. 如果验证不通过，则input的class是“.ng-invalid”
    2. 由上可知，可以通过验证通过和不通过对表单设置不一样的样式
      1. 在xxxComponent中编辑styles
      2. angular2 系列教程（二）组件

相关推荐