发表于: 2021-06-04 22:51:10

0 2098


今天完成的事情:get得到了,要展现到表单页面的数据; Angular Service(服务)


明天计划的事情:(一定要写非常细致的内容)任务进行,表单页面渲染。


遇到的问题:当要渲染到表单页面时(子组件内),发现获取到的数据是在父组件的兄弟组件,渲染遇到问题,了解到angular的Service(服务)可以完成(尝试中)。


收获:

angular 的学习一晃半个月了,知识充沛,需要学的还有太多。下面写一些我理解的。

深度思考:angular的核心思想,怎样体现在代码中:

angular核心包括六个方面,分别是组件、模板、指令、服务、依赖注入和路由。

组件:

 Angular框架基于组件设计,它最小的功能执行单元就是组件。组件类似于HTML页面抽出的公共元素,但并不仅限于这些。一个应用程序就是由这些大大小小的组件组成,它们之间会有一定的关系。直接采用Angular的命令创建的组件包括四个文件,HTML、CSS、Spec.ts、Component.ts。HTML和CSS文件展示模板视图的;Component.ts是组件类,做功能逻辑的处理的;Spec.ts是放测试代码的。

import { ComponentOnInit } from '@angular/core';

@Component({  // 组件装饰器
  selector: 'app-root'// 别的组件使用该组件的标签名,也是该组件的唯一标识
  templateUrl: './app.component.html'// 模板对应的文件,也可以使用template标签,后面用反单引号括起来HTML代码,效果是一样的
  styleUrls: ['./app.component.scss'// SCSS样式,修饰模板文件,可以引入多个scss文件(修饰组件样式的文件)
})


export class AppComponent { // 组件类的声明

  constructor() { }   // 构造器

  title = 'my-app';

  ngOnInit() {   // 该组件一初始化时要执行的内容
  }
}


模板:

模板是基于HTML的,普通的HTML文件或者代码都可以。上面代码显示的是一种引入模板的方式,也可以利用下面的模式引入:

template: '<div>...</div>' ,   // 直接在template标签下写HTML代码,需要用反单引号引起来

模板还有一套强大的语法体系。数据绑定是模板最基本的功能。数据绑定分为两种,分别是单向数据绑定和双向数据绑定。单向数据绑定包括属性绑定、事件绑定和插值。单向数据绑定和双向数据绑定指的是数据流向是单向还是双向的,单向和双向指的是模板和组件类之间。


指令:指令和模板关系密切,指令可以与DOM进行灵活交互,它可以改变样式,也可以改变布局,即控制DOM元素的显示与否。一般指令分为两种:结构指令和属性指令

结构指令能够添加、修改或删除DOM,从而改变布局。例:

<div *ngIf="panDuan"></div>

当panDuan为true时,该div会显示;当panDuan为false时,该div会被移除。

属性指令用来改变元素的外观或行为,使用起来跟普通的HTML元素属性非常相似,例如ngStyle和ngClass命令,用来动态控制样式.例:

<div [ngClass]="divClass"></div>

这样就可以把divClass这个class对应的样式渲染到该div上面。


服务: 服务是封装单一功能的单元,类似于工具库,常被引用于组件内部,作为组件的功能扩展。服务的形式不限,可以是一个简单的字符串或者JSON数据,也可以是一个函数甚至是一个类。(正在学习,要利用起来!)通过依赖注入的方式来引入使用所定的服务。


依赖注入:

依赖注入是Angular很重要的一部分,通过依赖注入的机制,服务等可以被引入到任何一个组件或者模块,或者其他服务中,而开发者无需关心服务的初始化,Angular 框架会帮忙做这件事,包括该模块本身依赖的其他模块。


路由:

路由控制了组件的发生和销毁,从而达到页面之间的跳转。它可以有指令形式,也可以通过配置。指令形式是指<router-outlet></router-outlet>,该标签的功能是根据当前的URL路径,匹配插入对应的组件节点,实现了页面的刷新。路由通过配置形式也可以实现,而且可以配置子路由,下面是简单的配置代码:

// 各组件的带入
import { MainComponent } from './main/main.component';
import { LoongComponent } from './loong/loong.component';
import { EnterComponent } from './enter/enter.component';
import { MyNavComponent } from './my-nav/my-nav.component';

const routes: Routes = [
  { path: ''pathMatch: 'full'redirectTo: 'enter' },
  { path: 'enter'component: EnterComponent }, // 登录页组件
  {
    path: 'my-nav'component: MyNavComponent, children: [ // 表单页面,主要内容页面的组件
      { path: 'loong'component: LoongComponent }, // 子组件(内容组件)
      { path: 'main'component: MainComponent }, // 子组件(欢迎页组件)
      { path: "**"component: MainComponent } // 默认进入父组件时所展现的组件内容
    ]
  },
  { path: '**'component: EnterComponent } // 页面加载后默认显示的组件内容
];









返回列表 返回列表
评论

    分享到