angular学习

最新推荐文章于 2024-05-11 10:54:35 发布

胖纸陀

最新推荐文章于 2024-05-11 10:54:35 发布

阅读量306

点赞数

分类专栏： AngularJS 文章标签： angular.js 学习 typescript

本文链接：https://blog.csdn.net/weixin_44237979/article/details/124976594

版权

AngularJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

angular项目，英雄之旅（1）

一.关于上次的笔记

  1.在angular中，脚手架的运作方式与vue不一样
  1.angualar没有所谓的页面中组件，其实是把不同的html文件以图层的方式贴在上面，每个组件
  时单独进行的 ，每个单独的组件是一个包含html，css，ts,spec.test文件组成的，他们个对自己的部   分负责
  与vue不用，vue的js文件时写在组件下面的，彼此之间的通过外置的router文件进行跨域访问

  2.
  spec文件是源文件的单元测试 . Angular应用程序的约定是为每个.ts文件提供.spec.ts文件 .
  当您使用 ng test 命令时，它们通过Karma任务运行程序使用Jasmine javascript测试框架运行 .

  3.
   FormsModule是对表单的炒作的module标签
   ng-moudule实行双向绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zzo0J0tf-1653494747926)(C:\Users\19667\AppData\Roaming\Typora\typora-user-images\image-20220525201721578.png)]

css，html，以及ts是用于不同的文件中进行声明的，但是vue的js一般写在组件里面，而且组件的后缀是.vue文件

2.ng-for

ng-for主要用于遍历循环，如同程序语言中的for循环类似，

在项目英雄之旅中用于遍历英雄，将文件中的英雄信息循环的打印出来；html代码如下：

   <ul class="pagenew">

  <li *ngFor="let hero of pagenew" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
<!--[class.selected]="hero === selectedHero"是后续用来美化选中部分的，跟该部分无关-->
    <span class="badge">{{hero.id}}</span>{{hero.name}}

  </li>

</ul>

ts代码是：

import { HEROES } from './mock-human';
import { Hero } from './hero';

export class NewpageComponent implements OnInit {
  pagenew = HEROES;  //这个部分是选中引入的ts的文档里的内容（函数）
 onSelect(hero: Hero): void{
    this.selectedHero = hero;
     //该部分是选中的英雄
  }
}

因为该项目中hero.ts文件其实是个接口，它里面只有相关的人物信息抽象方法：

export interface Hero{

  id:number;

  name:string;

}

因为还没有使用database，所以我们的数据是存在文档中的代码中，英雄的信息存在了mock-human.ts中

import { Hero } from "./hero";



export const HEROES: Hero[] = [

  {id:11, name: 'alex'},

  {id:12, name: 'bob'},

  {id:13, name: 'clancy'},

  {id:14, name: 'Delax'},

  {id:15, name: 'Edward'},

  {id:16, name: 'forjie'},

  {id:17, name: 'Gelanuo'},

];

然后项目结果为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-edfgRG2G-1653494747927)(C:\Users\19667\AppData\Roaming\Typora\typora-user-images\image-20220525203150115.png)]

ngIf

ngIf是做判断的，在英雄之旅的项目中是用于判断是否选中英雄条目用的

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name | uppercase}} Details</h2>

    <div><span>id: </span>{{selectedHero.id}}</div>

 </div>

export class NewpageComponent implements OnInit {

onSelect(hero: Hero): void{

  this.selectedHero = hero;

 }
}

她的功能仅能告知她已经被点击了，没有别的作用

ng-model双向绑定

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name | uppercase}} Details</h2>

    <div><span>id: </span>{{selectedHero.id}}</div>

    <div>

   <label for="hero-name">Hero name: </label>

   <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">

  </div>

 </div>

好了，到这里就可以解释所有的代码了

首先第一个标签声明判断是否进行点击了，联系上面的ts代码，h2标签中的uppercase是表示将该语句中所有的字母大写的意思，所以这个地方的意思就是在这里形成液体个h2标签，这里买呢写的是选中的英雄的名字大写后面加上Details

之后的label标签后面的表单中对英雄的名字进行双向绑定，当你在表单中修改了英雄的名字，这个英雄的名字将会改变。

新元件的添加

在程序的终端shellpower输入命令

ng generate component hero-detail

该命令的意思是产生一个新组建，组件名称是hero-detail

新元件的引用

在html的文件中添加该句式：

<app-要引入的组件名></app-要引入的组件名>

就可以成功添加了

这次的新元件的整合更多的像是对代码减少耦合

主要是对后续点卡可以进行绑定标签进行对英雄名的修改的部分的功能在新的组件上实现，ts代码如下：

import { Hero } from './../newpage/hero';
import { Component, Input, OnInit } from '@angular/core';

@Component({

 selector: 'app-hero-detail',

 templateUrl: './hero-detail.component.html',

 styleUrls: ['./hero-detail.component.css']

})

export class HeroDetailComponent implements OnInit {
 @Input() hero!: Hero;
//这里特别注意，这里是将Hero中的ts代码带到hero的变量中
//然后前面的表示就是父组件对该组件的传值
 constructor() { }
 ngOnInit(): void {

 }
}

@Input()是指从父组件对该组件的传值，在该项目中，父组件之前的newpage，此时在父组件的html文件中的代码在使用标签时要加一个新的东西，来进行@input的组件之间的传递

<app-hero-detail [hero]="selectedHero"></app-hero-detail>

[hero]="selectedHero"这个就是帮助父组件与子组件之间传递的标识，这个地方告诉你，子组件中的hero是来自父组件中的selectedHero。

当然hero-detail.html文件中，相应之前的与selectedHero相关的都要改成hero

<div *ngIf="hero">
  <h2>{{hero.name | uppercase}} Details</h2>
    <div><span>id: </span>{{hero.id}}</div>
    <div>
   <label for="hero-name">Hero name: </label>
   <input id="hero-name" [(ngModel)]="hero.name" placeholder="name">
  </div>
</div>