前端后端一锅端5

最新推荐文章于 2024-04-24 22:52:08 发布

无哥

最新推荐文章于 2024-04-24 22:52:08 发布

阅读量60

点赞数

分类专栏： web 文章标签：前端 javascript angular.js

本文链接：https://blog.csdn.net/willerwu/article/details/128518447

版权

web 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端后端一锅端5

2023/1/2

模板变量：可以引用模板中的 DOM 元素
指定名称的变量: 比如 #var=“ngModel”
属性绑定Attribute 绑定语法类：在 Attribute 名称前面加上前缀 attr，后跟一个点,如ARIA和SVG 只有 Attribute，绑定到这些对象固有的attribute, 如何用一个事件绑定绑多个属性？？如下SVG多个绑定好像能工作

export class SvgComponent {
 fillColor = 'rgb(255, 0, 0)';
 fillstroke='rgb(205, 0, 205)';
 strokeopacity=0.3;
 changeColor() {
   const r = Math.floor(Math.random() * 256);
   const g = Math.floor(Math.random() * 256);
   const b = Math.floor(Math.random() * 256);
   this.fillColor = `rgb(${r}, ${g}, ${b})`;
   this.fillstroke = `rgb(${r+110}, ${g-30}, ${b+10})`;
   this.strokeopacity=5;
 }
}
/SVG模板
<svg>
 <g> 
   <rect x="0" y="0" width="100" height="100" [attr.fill]="fillColor" [attr.stroke]="fillstroke"  [attr.stroke-width]="strokeopacity"  (click)="changeColor()" />
   <text x="120" y="50">click the rectangle to change the fill color</text>
 </g>
</svg>

属性绑定：Property binding ：2个翻译一样？
内置指令
-> 指令类型
==> 组件
==> 属性型指令: NgClass,NgStyle,NgModel
==>结构型指令
《Angular权威教程》-Ng-Book The Complete Guide to Angular 2.pdf 先看中文版
还有新版Ng-Book The Complete Guide to Angular 9.pdf和
Ng-Book The Complete Guide to Angular 11.pdf
需要的朋友https://alek772.github.io/这里下载。
回归看这本书吧。
Angular背后的指导思想之一就是组件化，组件化背后的基本思想：要教浏览器认识一些拥有自定义功能的新标签
用angular-cli来创建新组件：ng generate component hello-world
selector属性用来指出该组件将使用哪个DOM元素
styleUrls属性：接收一个数组型参数，可以为同一个组件加载多个样式表
2023/1/3
新建组件，ng generate component hello-world,会创建目录，路径引用不要管
只需要app.module.ts中import新建的组件就行，import { HelloWorldComponent } from ‘./hello-world/hello-world.component’;
每个人都有自己的生活，他人无法左右，只有内驱才行，强行干预只能造成矛盾，逆反,各有各的活法，只能自嘲儿孙自有儿孙福吧。也就是说冥冥中自有定数，老了…
- 是无序列标签，英文单词为“unordered list”，是闭合标签, 结合列表项标签< li>一起使用,< ul>标签的type属性< ul type ="circle"> disc, square.
@Input() name!: string; //error TS2564: Property ‘name’ has no initializer and is not definitely assigned in the constructor.: 增加！或者定义时赋初值@Input() myname: string=‘’; 或在constructor中赋值
@Input() 从父模板中传进来一个值，[]传入组件
< app-user-item *ngFor= “let ss of names” [myname]=“ss”>
< /app-user-item> 父组件，app-user-item子组件选择器，ss 临时变量，myname子组件变量，"ss"临时变量，而不是字符串字面量
要想在模板中使用一个组件，你必须首先在NgModule中声明它
bootstrap: [AppComponent] ：顶层组件
input标签上用#（ hash）来要求Angular把该元素赋值给一个局部变量,其它函数可以利用此变量
Semantic-UI：安装npm install --save semantic-ui
ES6中非常便利的一个特性：反引号字符串会展开模板变量！
host: {class: ‘row’}

Component
@Component({
 selector: 'mytag',
 templateUrl: './layout.template.html',
 host: {
   'class' : 'myclass1 myclass2 myclass3'
 }
})
export class MyTagComponent {
View code
<mytag></mytag>
Result
<mytag class="myclass1 myclass2 myclass3"></mytag>

默认情况下, JavaScript会把click事件冒泡到所有父级组件中,重新刷新将所有值重新归0，需要定义返回false的事件函数。
胖模型、皮包骨的控制器:说得好
再复习： Alt+← 返回上一步:
ctrl + Enter 跳转下一行开头
@Input() article: Article; : 新版中需要加括号()
没有如果，人生大事需慎重，自己就是反面典型。原生家庭有问题，一些事情无论如何都你都很难明白。
如果没有显式声明过方法的返回类型和返回值，就会假定它可能返回任何东西（即any类型）。然而，因为这里没有任何显式的return语句，所以实际返回的类型是void。
跟C++不同，class, 声明变量之后都需要，实例化new, 实例化时会自动调用构造函数。
当类没有显式地定义构造函数时，将自动创建一个无参构造函数。
=>语法还有一个重要的特性，就是它和环绕它的外部代码共享同一个this
typescript：字符串插值必须使用反引号，不能用单引号或双引号
组件模板插值：默认情况下，插值使用双花括号 {{ 和 }} 作为定界符： 2者有何不一样？
反引号字符串的另一个优点是允许多行文本
Angular应用是由组件构成的。可以将组件理解为一种教浏览器认识新HTML标签的方式

2023/1/4
37. 昨天看得有点晚，用力过猛，脖子很不舒服。老了呀。。。
38. css,这种Semantic-UI需要后面再学，图片显示有问题404
39. 组件的输入 @Input
40. 组件的输出

2023/1/5今天正式上班，又rework了一下 gsoap 的service.
41. ngStyle指令： [style.< cssproperty>]=“value”
42. JavaScript对象不允许字面量的键出现连字符：<div [ngClass]=“{‘bordered-box’: false}”>…< /div>
43. [ngClass]，需再看。
44. ngNonBindable
45. FormControl, FormGroup
46. FormsModule，ReactiveFormsModule

2023/1/6
47. < label for=“element_id”>

 <label for="male">Male</label> //++label标签的for属性和input标签的id属性是一致的
  <input type="radio" name="sex" id="male" value="male"><br>

FormBuilder:error TS2740: Type ‘FormControl’ is missing the following properties from type ‘FormGroup’: controls, registerControl, addControl, removeControl, and 2
more. 解决办法

from type 'FormControl<any>': defaultValue, registerOnChange, registerOnDisabledChange
solved:
import { Component } from '@angular/core';
import {
  FormBuilder,
  FormGroup,  FormControl, AbstractControl ,
} from '@angular/forms';

@Component({
  selector: 'demo-form-sku-builder',
  template: `
  <div class="ui raised segment">
    <h2 class="ui header">Demo Form: Sku with Builder</h2>
    <form [formGroup]="myForm" 
          (ngSubmit)="onSubmit(myForm.value)"
          class="ui form">

      <div class="field">
        <label for="skuInput">SKU</label>
        <input type="text" 
               id="skuInput" 
               placeholder="SKU"
               [formControl]="convertToFormControl(myForm.get('sku'))" >//here to fix
      </div>

      <button type="submit" class="ui button">Submit</button>
    </form>
  </div>
  `
})
export class DemoFormSkuBuilder {
  myForm: FormGroup; 

  constructor(fb: FormBuilder) {
    this.myForm = fb.group({
      'sku': ['ABC123']
    });   
  }
  onSubmit(value: string): void {
    console.log('you submitted value: ', value);
  }
  //将AbstractControl转换为FormControl
  convertToFormControl(absCtrl: AbstractControl | null): FormControl
  {
    const ctrl = absCtrl as FormControl;
    return ctrl;
  }
}