事关我个Vue开发转Angular的那些事三

引入表单控件

import { FormContorl } from '@angular/forms'

export default NameFormComponent{
    name = new FormContorl("");
}

setNameValue(){
    this.name.setValue("Boby");
}

<input type="text" [Formconorl]="name" />
<p> {{name.value}} </p>

引入angular自带的单个表单控件FormContorl,可实现表单双向绑定的效果,在模板中通过xxx.value来调用值,且通过setValue方法修改目标值.

表单控件组

import { FormContorl,FormGroup } from '@angular/forms'

export default NameFormComponent{
    // new FormGroup
    groupLogin:FormGroup = new FormGroup({
        admin: new FormContorl(""),
        password: new FormContorl(""),// 实例化一整个对象
    });
    
    submitFn(){
        console.log(this.groupLogin.value.admin)
    }
}

      <form [formGroup]="groupLogin">
        <div class="form-group">
          <label>Name:</label>
          <input type="text" FormContorlName="groupLogin.admin" required>
        </div>
        
        <div class="form-group">
          <label>password:</label>
          <input type="text" FormContorlName="groupLogin.password" required>
        </div>

        <button type="submit" class="btn btn-success" (click)="submitFn()">Submit</button>

      </form>

form表单控件组FormGroup,在form标签上绑定formGroup与之对应的对象,子元素通过FormControlName绑定子属性值.

angular路由

路由管理

路由表
- 一个规则的,用来管理所有路由的列表
路由
- 路由列表里面的一条规则,定义基本信息如路由地址,以及对应展示的组件

import {RouterModule,Routes} from '@angular/router'
// 组件
import {HomeView} from '../../homeView.component'
import {HomeContent} from '../../homeContent.component'

// 路由表配置
constroutes:Routes = {
    {
        path:'home',
        component:HomeView,
    },
    {
        path:'homeContent',
        component:HomeContent,
    },
    // 双通配符匹配404路由
    { 
        path: '**', component: PageNotFoundComponent, 
    }, 
    // 路由重定向 redirect to `first-component`
    { 
        path: '', redirectTo: '/first-component', pathMatch: 'full' ,
    }, 
    // 路由懒加载
    loadChildren: () => import('./components/list/list.module').then(m => m.ListModule),
    
};

@ngModules({
    imports:[RouterModule,forRoot(routes)],
    exports:[RouterModule]
})

export class AppRoutingModule{}

路由渲染

<router-outlet></router-outlet> //这个占位符用来展示路由链接跳转的内容

路由传值

// 1. 路由表设置
{
    path:'news-comtent/:aid',
    component:NewsComtentComponent,
}

// 2. 静态参数 
{
    path:'news-comtent/:aid',
    component:NewsComtentComponent,
    data: { 
    title: '详情',
    meta: '数据',
    }
}


// 3. query传参 父组件中,通过[queryParams]="{}"的形式来进行传值。
<ul> 
    <li *ngFor="let item of list ;let key = index">
        <!-- <a 
        [routerLink]="[ '/news-comtent' ]" 
        [queryParams]="{aid:key}">
        {{key}}----{{item}}
        </a> --> 
        <a [routerLink]="['/news-comtent/' ,key]">{{key}}---{{item}}</a> 
    </li>
</ul>

// 子组件中,通过this.route.queryParams获取动态路由的值
ngOnInit(): void {
    console.log(this.route.queryParams,'路由路由');
    // 上边这样拿不到传过来参数的值
    // 下边的方式可以获取传过来的值 
    this.route.queryParams.subscribe((data)=>{
        console.log(data,'获取get传值'); 
    })
}

路由传值之resolve加服务

声明动态路由参数resolve ()

{ 
    path: 'detail', 
    loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule), 
    // 动态路由参数 
    resolve: { 
        detail: DetailResolver 
    },
},

创建Resolver (detail.resolver.ts)

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { DetailService } from './detail.service';


@Injectable({ providedIn: 'root' }) 
export class DetailResolver implements Resolve<any> {
    constructor(private detailService: DetailService) {
    } 
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any { 
        return this.detailService.getDetail(); 
    } 
}

创建服务(detail.service.ts)

import {Injectable} from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' }) 

export class DetailService {
    constructor( private http: HttpClient, ) { }
    getDetailAuth(): any {
        return this.http.get('/detail/auth'); 
    } 
    // 增加的 
    getDetail(): any {
        return this.http.get('/detail'); 
    } 
}

To Be Continue

angular中的各种装饰器

angular共有5种类装饰器，表明每个类的用途，angular用何种方式解析它。
- NgModule: 标明是一个angular模块
- Component：标明是一个组件
- Directive：标明是一个指令
- Injectable：标明是一个服务
- Pipe：标明是一个管道