黑马程序员技术交流社区

标题: 【上海校区】angular入门总结 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-8-2 09:33
标题: 【上海校区】angular入门总结

1. [(ngModel)]数据双向绑定，即数据在DOM和组件之间是双向传递的，为了实现低耦合实现数据的封装，通常会引入自定义对象（这些对象往往是为了接受处理后端传来的数据），在DOM中通过 对象.属性名 的方式得到值

• 
  
  export class Student{
  
  
• 
  
      public name: string; // 姓名
  
  
• 
  
      public sex: string; // 性别
  
  
• 
  
      constructor(){}
  
  
• 
  
  }
  
  
• 
  
  export class StudentComponent implements OnInit {
  
  
• 
  
      student: Student;
  
  
• 
  
      constructor(public fb: FormBuilder){}
  
  
• 
  
      ngOnInit(){}
  
  
• 
  
  }
  
  
  

• 
  
  <input pInputText [(ngModel)]="student.name">{{student.name}}
  
  
• 
  
  <input pInputText [(ngModel)]="student.sex">{{student.sex}}
  
  
  

运行之后发现报错，反正就是找不到name和sex这两个属性...

原因：只是定义了Student这个对象，但是没有创建，需要new一下

2.Form表单相关问题

百度了好多也没有找到自己满意的答案，作为刚入门者，需要一个简单而清晰的案例

• 
  
    <form [formGroup]="addData" (ngSubmit)="onSubmit(addData)" *ngIf="product">
  
  
• 
  
        <div class="ui-grid ui-grid-responsive ui-fluid">
  
  
• 
  
          <div class="ui-grid-row">
  
  
• 
  
            <div class="ui-g-3 control-label">
  
  
• 
  
              <label>姓名：</label>
  
  
• 
  
            </div>
  
  
• 
  
            <div class="ui-g-5">
  
  
• 
  
              <input pInputText formControlName="name" class="label-height"                 
  
  
• 
  
                             [(ngModel)]="student.name" placeholder="请输入姓名">
  
  
• 
  
            </div>
  
  
• 
  
            <div class="ui-g-4">
  
  
• 
  
              <span style="color: red">*</span>
  
  
• 
  
              <div style="color: red" class="label-height" class="ui-message ui-message-            
  
  
• 
  
                        error ui-corner-all" *ngIf="!addData.controls['name'].valid &&
  
  
• 
  
                        addData.controls['name'].dirty">
  
  
• 
  
                <i class="fa fa-close"></i>请输入姓名
  
  
• 
  
              </div>
  
  
• 
  
            </div>
  
  
• 
  
          </div>
  
  
• 
  
      </div>
  
  
• 
  
  </form>
  
  
  

• 
  
  validForm(){
  
  
• 
  
      this.addData = this.fb.group({
  
  
• 
  
          'name' = new FormControl('', Validators.required);
  
  
• 
  
      });
  
  
• 
  
  }
  
  
  

忽略代码中的页面布局，formControlName会对应由FormGroup创建的表单的相同字段，如果addData中没有找到和formControlName相同的名称，会报找不到name为该名称的control

3.路由配置

在根模块下创建一个路由配置文件 app-routing.module.ts

ng g model app-routing --flat --module=app

--flat：把这个文件放进src/app中，而不是单独的目录中

--module=app告诉CLI把它注册到AppModule中的import数组中

• 
  
  import { NgModule } from '@angular/core';
  
  
• 
  
  import { Routes, RouterModule } from '@angular/rout;
  
  
• 
  
  import { DemoComponent } from './components/student/student.component';
  
  
• 
  
  
  
  
• 
  
  const routes: Routes = [
  
  
• 
  
    {path: '', redirectTo: '/studentInfo', pathMatch: 'full'},
  
  
• 
  
  
  
  
• 
  
    {path: 'studentInfo', component: ProductComponent},
  
  
• 
  
  
  
  
• 
  
    {path: 'productInfo/:name', component: ProductComponent}
  
  
• 
  
  ];
  
  
• 
  
  
  
  
• 
  
  @NgModule({
  
  
• 
  
    imports: [ RouterModule.forRoot(routes)],
  
  
• 
  
    exports: [ RouterModule ]
  
  
• 
  
  })
  
  
• 
  
  export class AppRoutingModule { }
  
  
  

添加路由定义，通过不同的URL访问不同的页面

一般有两个属性，path用来匹配URL字符串，component表示当导航到此路由时，创建哪个组件。

通过加入import中初始化路由 imports: [ RouterModule.forRoot(routes) ]

修改app.component.html，改为<router-outlet></router-outlet>指定在哪里显示路由到的视图。

添加默认路由

{ path: '', redirectTo: '/xxxx', pathMatch: 'full' }

会自动定向到/xxxx，并自动加载组件

---

作者: 不二晨    时间: 2018-8-2 17:35
奈斯，棒棒哒

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2