从这里开始我们来讲语法

NgModule简介

declarations 数组 的规则

该模块想要正常工作，可能会依赖一些组件、指令和管道，那就必须将它们声明到declarations中，不过引入也有一些规则，以组件为例：

  • 模块中不能使用未声明过（没有添加到declarations中）的组件
  • 一个组件只能被一个模块声明
  • 在declarations中的组件默认只能在当前模块中使用，要想让其他模块使用，必须exports出去（参考下文的exports）

以上规则同样适用于指令和管道

imports 数组规则

imports数组只会出现在@NgModule装饰器中，一个模块想要正常工作，除了本身的依赖项(declarations)，还可能需要其他模块导出的依赖项。
只要是angular module，都可以导入imports数组中，比如自定义的模块，第三方或者ng内置的都可以

bootstrap 数组规则

应用是通过引导根模块 AppModule 来启动的，引导过程还会创建 bootstrap 数组中列出的组件，并把它们逐个插入到浏览器的 DOM 中。
该数组中的每个组件，都作为组件树的根（根组件），后续所有组件都是基于根组件的(如图)。
虽然也可以在宿主页面中放多个组件，但是大多数应用只有一个组件树，并且只从一个根组件开始引导。
这个根组件通常叫做 AppComponent，并且位于根模块的 bootstrap 数组中。
image.png

  1. # app.module.ts
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { NgModule } from '@angular/core';
  5. import { AppRoutingModule } from './app-routing.module';
  6. import { AppComponent } from './app.component';
  8. //  这是一个NgModule 
  9. // angular module就是一个普通的类，但是这个类，一旦被@NgModule所装饰
  10. ，那这个类就可以被称为angular module
  12. @NgModule({
  13.   declarations: [
  14.     AppComponent  // 该模块的依赖项 需要显示的声明
  15.   ],
  16.   imports: [
  17.     BrowserModule,  //导入其他的ngModule
  18.     AppRoutingModule
  19.   ], 
  20.   providers: [],   // 这个是  给外界提供的 服务 service  提供各种服务。
  21.   bootstrap: [AppComponent]  // 这个属性一般只有根组件用到，在main中使用了它  
  22.   根组件，Angular 创建它并插入 index.html 宿主页面
  23. })
  24. export class AppModule { }
  27. # main.ts
  28. import { enableProdMode } from '@angular/core';
  29. import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  30. import { AppModule } from './app/app.module';
  31. import { environment } from './environments/environment';
  32. import 'bootstrap';
  34. if (environment.production) {
  35.   enableProdMode();
  36. }
  38. platformBrowserDynamic().bootstrapModule(AppModule)
  39.   .catch(err => console.error(err));

那么我们如何创建一个Moduel？ 使用cli就可以了 CLI地址

  1. ng g module  my-module
  3. # 如果你这样写 就会生成子文件
  4. ng g module  my-module/chile-module

生成之后的样子
image.png

  1. import { NgModule } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  6. @NgModule({
  7.   declarations: [],
  8.   imports: [
  9.     CommonModule
  10.   ]
  11. })
  12. export class MyModuleModule { }

基础的展示数据

显示数据

ng的模版中，默认用双大括号{{}}绑定组件中的变量显示出来

  1. import { Component } from '@angular/core';
  3. // @Component({
  4. //   selector: 'app-root',  // 选择器和dom的选择器保持一致的语法
  5. //   template: `
  6. //     <h1>{{title}}</h1>
  7. //     <h2>My favorite hero is: {{myHero}}</h2>
  8. //     `,
  9. //   styles: [`h1 { color: red }`]
  10. // })
  11. // @Component({
  12. //   selector: 'app-root',
  13. //   templateUrl: './app.component.html',
  14. //   styleUrls: ['./app.component.scss']
  15. // })
  16. export class AppComponent {
  17.   title = 'myapp';
  18. }

模版表达式

  1. import { Component } from '@angular/core';
  3. // @Component({
  4. //   selector: 'app-root',
  5. //   templateUrl: './app.component.html',
  6. //   styleUrls: ['./app.component.scss']
  7. // })
  9. @Component({
  10.   selector: 'app-root',  // 选择器和dom的选择器保持一致的语法
  11.   template: `
  12.     <h1>{{title}}</h1>
  13.     <h2>My favorite hero is: {{myHero}}</h2>
  14.     <br/>
  15.     <h2>Fn:{{ getValue() }}</h2>
  16.     <br />
  17.     <p>与方法结合 {{ price * 0.7 + getValue() }}.</p>
  18.     `,
  19.   styles: [`h1 { color: red }`]
  20. })
  21. export class AppComponent {
  22.   // 绑定变量
  23.   title = 'myapp';
  24.   myHero  = '666';
  25.   price  = 23;
  27.   // 绑定方法
  28.   getValue = () => {
  29.     return "XXX"
  30.   }
  31.   // 注意： 使用模板表达的时候一定要注意 不能有副作用的变量！
  32. }

绑定属性

主要用来绑定html中的属性 比如img 的src a标签的href等…

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'app-root',  
  5.   template: `
  6.     <div>
  7.     // 一般的属性
  8.     <br/>
  9.     <img src="../assets/01.png" alt="madao" />
  10.     <img [src]="imgValue" alt="madao" />
  11.     <img bind-src="imgValue" alt="madao" />
  12.     <br>
  13.     <table class="table-bordered">
  14.       <tr>
  15.         <th>name</th>
  16.         <th>phone</th>
  17.         <th>age</th>
  18.       </tr>
  19.       <tr>
  20.         <td>张三</td>
  21.         <td>13398490594</td>
  22.         <td>33</td>
  23.       </tr>
  24.       <tr>
  25.         <td [colSpan]="colSpan">李四</td>
  26.         <td>15079049984</td>
  27.         <td>22</td>
  28.       </tr>
  29.     </table>
  30.     <button class="btn btn-primary" [disabled]="isDisabled">click</button>
  31.     </div>
  32.     // 自定义的属性 规范：虽然{{ 2 }}也能给属性绑定值 但是还是建议 写 [ ] 
  33.     <br />
  34.     <span [attr.data-title]="customTitle">一行文字</span>
  35.     <span [attr.title]="customTitle">test title</span>
  36.     <span [title]="customTitle">test title</span>
  37.     `,
  38.   styles:[
  39.     ` img { width:200px; } `
  40.   ]
  41. })
  42. export class AppComponent {
  44.   imgValue = '../assets/01.png';
  45.   user = {
  46.     name: 'madao',
  47.     pic: this.imgValue
  48.    };
  49.    colSpan = 2;
  50.    isDisabled = false;
  51.    customTitle = '还是老李NB';
  52. }

绑定样式

实际上绑定样式也是非常的简单 需要注意的一点就是其的 优先级的问题 总结下来就是两点

  • 某个类或样式绑定越具体，它的优先级就越高
  • 绑定总是优先于静态属性 ```typescript import { Component } from ‘@angular/core’;

// @Component({ // selector: ‘app-root’, // templateUrl: ‘./app.component.html’, // styleUrls: [‘./app.component.scss’] // })

@Component({ selector: ‘app-root’, // 选择器和dom的选择器保持一致的语法 template: // 绑定class当个的 <hr /> <button type="button" class="btn" [class.btn-primary]="theme === 'primary'">Primary</button> <button type="button" class="btn" [class.btn-secondary]="true">secondary</button> <button type="button" class="btn" [class.btn-success]="isSuccess">success</button> <button type="button" class="btn" [class.btn-danger]="'啦啦啦'">danger</button> <button type="button" class="btn" [class.btn-danger]="0">danger</button> <button type="button" class="btn" [class.btn-danger]="undefined">danger</button> // 绑定class多个的 <hr /> <!-- 也可以用内置指令ngClass [ngClass]="btnCls" 等价于 class.btnCls --> <button type="button" [ngClass]="btnCls">btnCls</button> <button type="button" [ngClass]="btnCls2">btnCls2</button> <button type="button" [ngClass]="btnCls3">btnCls3</button> <br /> // 绑定Style <hr /> <!-- 及其不推荐的写法！单个 style --> <p [style.height]="'50px'" [style.border]="'1px solid'">设置高度</p> <!-- 多个！style --> <p [ngStyle]="style3">style3</p>, styles:[ img { width:200px; } ] }) export class AppComponent { theme = ‘primary’; isSuccess = true;

  1. btnCls = 'btn btn-primary';
  2. btnCls2 = ['btn', 'btn-success'];
  3. btnCls3 = {
  4.   btn: true,
  5.   'btn-info': true
  6. };
  8. style3 = {
  9.   width: '200px',
  10.   height: '50px',
  11.   'text-align': 'center',
  12.   border: '1px solid'
  13. }

}

  1. <a name="cnUd5"></a>
  2. ## 创建组件
  3. > 上面的东西我们观察了一下发现 实际上都放在了 app.component.ts 这一个组件中，那么我们如何自己创建自己的组件呢？  [CLI文档](https://angular.cn/cli/generate#component)
  5. ```shell
  6. # 下面的cli命令就能执行做到这件事
  8. ng g c comp1 (在src/app下创建名为comp1的组件)
  10. ng g c components/comp1 (在src/app/components下创建名为comp1的组件)
  12. # 生成之后会自动的在你的app.module中的import 中加入它 如果没有你需要加 要不然你的app.componet
  13. 组件中 你就无法使用它

同样的 我们也有些指定的options ，具体在CLI文档中对这个 命令 有详细的描述

  1. ng g c component1 --inline-style --inline-template  --skip-tests

这条命令 之后 生成了一个组件 你需要这样去使用它

  1. # app-component1 文件夹中，默认的 创建出来的组件 的  selector 都是以app- 开头 如何去修改
  2. 它呢？
  4. # tslint.js
  5. ++++
  6.     "directive-selector": [
  7.       true,
  8.       "attribute",
  9.       "app", // 这个东西就是咯
  10.       "camelCase"
  11.     ],
  12. ++++
  14. # component1.component.ts
  15. import { Component, OnInit } from '@angular/core';
  17. @Component({
  18.   selector: 'app-component1',
  19.   template: `
  20.     <p>
  21.       component1 works!
  22.     </p>
  23.   `,
  24.   styles: [
  25.   ]
  26. })
  27. export class Component1Component implements OnInit {
  29.   constructor() { }
  31.   ngOnInit(): void {
  32.   }
  34. }
  36. # 在我们原来的app.components.ts中使用它
  37. import { Component } from '@angular/core';
  39. @Component({
  40.   selector: 'app-root',  // 选择器和dom的选择器保持一致的语法
  41.   template: `
  42.   <app-component1 > </app-component1> 
  43.     `,
  44.   styles:[
  45.     ` img { width:200px; } `
  46.   ]
  47. })
  48. export class AppComponent {
  50. }

绑定事件

对于绑定事件来说也是非常的简单的

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'app-root',
  5.   template: `
  6.   <div *ngFor="let item of list">  
  7.     <button 
  8.       type="button" 
  9.       class="btn btn-primary" 
  10.       (click)="onClick($event, item )">{{ item.name }}</button>
  11.   </div>
  12.   `,
  13.   styleUrls: ['./app.component.scss']
  14. })
  16. export class AppComponent {
  17.     list  = [  {
  18.       name:'老李',
  19.     }, {
  20.       name: '老王'
  21.     }, ];
  23.     onClick = ( e:MouseEvent, value ) => {
  24.       console.log('value1', event.target);
  25.       console.log(' value2', value);
  26.     };
  27. }

这里用到了一个循环渲染列表的模板语法 我们暂时不用过多了解你只需要知道是怎么用的就完了

组件间的通信

我们一般在vue 和react 中都叫做什么 props 和 回调 但是在ng中换了个名字 叫做：“输入/输出 属性” 具体的语法如下

首先，我们为了演示这个语法 需要坐下面的工作, 先创建组件
image.png
然后我们先看父子 

  1. # father
  2. import { Component, OnInit } from '@angular/core';
  5. @Component({
  6.   selector: 'app-father',
  7.   template: `
  9.   <!--正常的使用
  10.   <app-son 
  11.     [item]=[item] 
  12.     (newItemEvent)="addItem($event)"
  13.     ></app-son>-->
  15.   <div>
  16.     <!--别名-->
  17.      <app-son 
  18.         [aliasItem]=[item] 
  19.         (newItem)="addItem($event)"
  20.         ></app-son>
  21.     </div>
  22.   `,
  23.   styles: [
  24.   ]
  25. })
  26. export class FatherComponent implements OnInit {
  28.   item = '2'
  30.   addItem(newItem: string) {
  31.     console.log('你来啦', newItem);
  32.   }
  34.   constructor() {}
  36.   ngOnInit(): void {
  37.   }
  39. }
  41. # son
  43. import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  45. @Component({
  46.   selector: 'app-son',
  47.   template: `
  48.     <div>
  49.       Today's item: {{item}}
  50.       <hr />
  51.       // 给父组件发射值
  52.       <br />
  53.       <label>Add an item: <input #newItem></label>
  54.       <button (click)="addNewItem(newItem.value)">Add to parent's list</button>
  56.     </div>
  57.   `,
  58.   styles: [
  59.   ]
  60. })
  61. export class SonComponent implements OnInit {
  62.   // @Input() item: string; // 接受属性 就想在vue中需要给props做点声明一样
  63.   // @Output() newItemEvent = new EventEmitter<string>();  // 给父组件的回调
  65.   // 如果你需要使用别名就这样就好了
  66.   @Input('aliasItem') item: string; // 接受属性 就想在vue中需要给props做点声明一样
  67.   @Output('newItem') newItemEvent = new EventEmitter<string>();  // 给父组件的回调
  69.   addNewItem(value: string) {
  70.     this.newItemEvent.emit(value);
  71.   }
  73.   constructor() {}
  75.   ngOnInit(): void {
  76.     console.log(this.item);
  77.   }
  79. }

然后再回过头 想一下 不相干的组件怎么办？ 实际上依然可以 采取 ：“状态提升”的逻辑来搞事情，但是对于NG来说 通信有好多好多的方式 状态提升 可以作为一种，但绝不是 最好的方式在ng中