Angular基础保姆级教程 - 1

Angular 基础总结（完结版）

1. 概述

Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架，用来构建单页应用程序。

Angular 是一个重量级的框架，内部集成了大量开箱即用的功能模块。

Angular 为大型应用开发而设计，提供了干净且松耦合的代码组织方式，使应用程序整洁更易于维护。

Angular Angular 中文 Angular CLI

2. 架构预览

在这里插入图片描述

2.1 模块

Angular 应用是由一个个模块组成的，此模块指的不是ESModule，而是 NgModule 即 Angular 模块。

NgModule 是一组相关功能的集合，专注于某个应用领域，可以将组件和一组相关代码关联起来，是应用组织代码结构的一种方式。

在 Angular 应用中至少要有一个根模块，用于启动应用程序。

NgModule 可以从其它 NgModule 中导入功能，前提是目标 NgModule 导出了该功能。

NgModule 是由 NgModule 装饰器函数装饰的类。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';@NgModule({imports: [BrowserModule]
})
export class AppModule { }
2.2 组件

组件用来描述用户界面，它由三部分组成，组件类、组件模板、组件样式，它们可以被集成在组件类文件中，也可以是三个不同的文件。

组件类用来编写和组件直接相关的界面逻辑，在组件类中要关联该组件的组件模板和组件样式。

组件模板用来编写组件的 HTML 结构，通过数据绑定标记将应用中数据和 DOM 进行关联。

组件样式用来编写组件的组件的外观，组件样式可以采用 CSS、LESS、SCSS、Stylus

在 Angular 应用中至少要有一个根组件，用于应用程序的启动。

组件类是由 Component 装饰器函数装饰的类。

import { Component } from "@angular/core"@Component({selector: "app-root",templateUrl: "./app.component.html",styleUrls: ["./app.component.css"]
})
export class AppComponent {title = "angular-test"
}

NgModule 为组件提供了编译的上下文环境。

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],bootstrap: [AppComponent]
})
export class AppModule { }
2.3 服务

服务用于放置和特定组件无关并希望跨组件共享的数据或逻辑。

服务出现的目的在于解耦组件类中的代码，是组件类中的代码干净整洁。

服务是由 Injectable 装饰器装饰的类。

import { Injectable } from '@angular/core';@Injectable({})
export class AppService { }

在使用服务时不需要在组件类中通过 new 的方式创建服务实例对象获取服务中提供的方法，以下写法错误，切记切记！！！

import { AppService } from "./AppService"export class AppComponent {let appService = new AppService()
}

服务的实例对象由 Angular 框架中内置的依赖注入系统创建和维护。服务是依赖需要被注入到组件中。

在组件中需要通过 constructor 构造函数的参数来获取服务的实例对象。

涉及参数就需要考虑参数的顺序问题，因为在 Angular 应用中会有很多服务，一个组件又不可能会使用到所有服务，如果组件要使用到最后一个服务实例对象，难道要将前面的所有参数都写上吗 ? 这显然不合理。

在组件中获取服务实例对象要结合 TypeScript 类型，写法如下。

import { AppService } from "./AppService"export class AppComponent {constructor (private appService: AppService) {}
}

Angular 会根据你指定的服务的类型来传递你想要使用的服务实例对象，这样就解决了参数的顺序问题。

在 Angular 中服务被设计为单例模式，这也正是为什么服务可以被用来在组件之间共享数据和逻辑的原因。

3. 快速开始

3.1 创建应用

  1. 安装 angular-cli：npm install @angular/cli -g

  2. 创建应用：ng new angular-test --minimal --inlineTemplate false

    1. –skipGit=true
    2. –minimal=true
    3. –skip-install
    4. –style=css
    5. –routing=false
    6. –inlineTemplate
    7. –inlineStyle
    8. –prefix

在这里插入图片描述
3. 运行应用：ng serve

  1. –open=true 应用构建完成后在浏览器中运行

  2. –hmr=true 开启热更新

  3. hmrWarning=false 禁用热更新警告

  4. –port 更改应用运行端口

  5. 访问应用：localhost:4200
    在这里插入图片描述

3.2 默认代码解析
3.2.1 main.ts
// enableProdMode 方法调用后将会开启生产模式
import { enableProdMode } from "@angular/core"
// Angular 应用程序的启动在不同的平台上是不一样的
// 在浏览器中启动时需要用到 platformBrowserDynamic 方法, 该方法返回平台实例对象
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
// 引入根模块 用于启动应用程序
import { AppModule } from "./app/app.module"
// 引入环境变量对象 { production: false }
import { environment } from "./environments/environment"// 如果当前为生产环境
if (environment.production) {// 开启生产模式enableProdMode()
}
// 启动应用程序
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err))

在这里插入图片描述

3.2.2 environment.ts
// 在执行 `ng build --prod` 时, environment.prod.ts 文件会替换 environment.ts 文件
// 该项配置可以在 angular.json 文件中找到, projects -> angular-test -> architect -> configurations -> production -> fileReplacementsexport const environment = {production: false
}

#####3.2.3 environment.prod.ts

export const environment = {production: true
}
3.2.4 app.module.ts
// BrowserModule 提供了启动和运行浏览器应用所必需的服务
// CommonModule 提供各种服务和指令, 例如 ngIf 和 ngFor, 与平台无关
// BrowserModule 导入了 CommonModule, 又重新导出了 CommonModule, 使其所有指令都可用于导入 BrowserModule 的任何模块 
import { BrowserModule } from "@angular/platform-browser"
// NgModule: Angular 模块装饰器
import { NgModule } from "@angular/core"
// 根组件
import { AppComponent } from "./app.component"
// 调用 NgModule 装饰器, 告诉 Angular 当前类表示的是 Angular 模块
@NgModule({// 声明当前模块拥有哪些组件declarations: [AppComponent],// 声明当前模块依赖了哪些其他模块imports: [BrowserModule],// 声明服务的作用域, 数组中接收服务类, 表示该服务只能在当前模块的组件中使用providers: [],// 可引导组件, Angular 会在引导过程中把它加载到 DOM 中bootstrap: [AppComponent]
})
export class AppModule {}
3.2.5 app.component.ts
import { Component } from "@angular/core"@Component({// 指定组件的使用方式, 当前为标记形式// app-home   =>  <app-home></app-home>// [app-home] =>  <div app-home></div>// .app-home  =>  <div class="app-home"></div>selector: "app-root",// 关联组件模板文件// templateUrl:'组件模板文件路径'// template:`组件模板字符串`templateUrl: "./app.component.html",// 关联组件样式文件// styleUrls : ['组件样式文件路径']// styles : [`组件样式`]styleUrls: ["./app.component.css"]
})
export class AppComponent {}
3.2.6 index.html
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>AngularTest</title><base href="/"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body><app-root></app-root>
</body>
</html>

在这里插入图片描述

3.3 共享模块

共享模块当中放置的是 Angular 应用中模块级别的需要共享的组件或逻辑。

  1. 创建共享模块： ng g m shared

  2. 创建共享组件：ng g c shared/components/Layout

  3. 在共享模块中导出共享组件

    @NgModule({declarations: [LayoutComponent],exports: [LayoutComponent]
})
export class SharedModule {}

  4. 在根模块中导入共享模块

    @NgModule({declarations: [AppComponent],imports: [SharedModule],bootstrap: [AppComponent]
})
export class AppModule {}

  5. 在根组件中使用 Layout 组件

    @Component({selector: "app-root",template: `<div>App works</div><app-layout></app-layout>`,styles: []
})
export class AppComponent { }

4. 组件模板

4.1 数据绑定

数据绑定就是将组件类中的数据显示在组件模板中，当组件类中的数据发生变化时会自动被同步到组件模板中（数据驱动 DOM ）。

在 Angular 中使用差值表达式进行数据绑定，即 {{ }} 大胡子语法。

<h2>{{message}}</h2>
<h2>{{getInfo()}}</h2>
<h2>{{a == b ? '相等': '不等'}}</h2>
<h2>{{'Hello Angular'}}</h2>
<p [innerHTML]="htmlSnippet"></p> <!-- 对数据中的代码进行转义 -->
4.2 属性绑定
4.2.1 普通属性

属性绑定分为两种情况，绑定 DOM 对象属性和绑定HTML标记属性。

  1. 使用 [属性名称] 为元素绑定 DOM 对象属性。
<img [src]="imgUrl"/>
  1. 使用 [attr.属性名称] 为元素绑定 HTML 标记属性
<td [attr.colspan]="colSpan"></td>

在大多数情况下，DOM 对象属性和 HTML 标记属性是对应的关系，所以使用第一种情况。但是某些属性只有 HTML 标记存在，DOM 对象中不存在，此时需要使用第二种情况，比如 colspan 属性，在 DOM 对象中就没有，或者自定义 HTML 属性也需要使用第二种情况。

4.2.2 class 属性
<button class="btn btn-primary" [class.active]="isActive">按钮</button>
<div [ngClass]="{'active': true, 'error': true}"></div>
4.2.3 style 属性
<button [style.backgroundColor]="isActive ? 'blue': 'red'">按钮</button>
<button [ngStyle]="{'backgroundColor': 'red'}">按钮</button>
4.3 事件绑定
<button (click)="onSave($event)">按钮</button>
<!-- 当按下回车键抬起的时候执行函数 -->
<input type="text" (keyup.enter)="onKeyUp()"/>

export class AppComponent {title = "test"onSave(event: Event) {// this 指向组件类的实例对象this.title // "test"}
}
4.4 获取原生 DOM 对象
4.4.1 在组件模板中获取
<input type="text" (keyup.enter)="onKeyUp(username.value)" #username/>
4.4.2 在组件类中获取

使用 ViewChild 装饰器获取一个元素

<p #paragraph>home works!</p>

import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"export class HomeComponent implements AfterViewInit {@ViewChild("paragraph") paragraph: ElementRef<HTMLParagraphElement> | undefinedngAfterViewInit() {console.log(this.paragraph?.nativeElement)}
}

使用 ViewChildren 获取一组元素

<ul><li #items>a</li><li #items>b</li><li #items>c</li>
</ul>

import { AfterViewInit, QueryList, ViewChildren } from "@angular/core"@Component({selector: "app-home",templateUrl: "./home.component.html",styles: []
})
export class HomeComponent implements AfterViewInit {@ViewChildren("items") items: QueryList<HTMLLIElement> | undefinedngAfterViewInit() {console.log(this.items?.toArray())}
}
4.5 双向数据绑定

数据在组件类和组件模板中双向同步。

Angular 将双向数据绑定功能放在了 @angular/forms 模块中，所以要实现双向数据绑定需要依赖该模块。

import { FormsModule } from "@angular/forms"@NgModule({imports: [FormsModule],
})
export class AppModule {}

<input type="text" [(ngModel)]="username" />
<button (click)="change()">在组件类中更改 username</button>
<div>username: {{ username }}</div>

export class AppComponent {username: string = ""change() {this.username = "hello Angular"}
}
4.6 内容投影
<!-- app.component.html -->
<bootstrap-panel><div class="heading">Heading</div><div class="body">Body</div>
</bootstrap-panel>

<!-- panel.component.html -->
<div class="panel panel-default"><div class="panel-heading"><ng-content select=".heading"></ng-content></div><div class="panel-body"><ng-content select=".body"></ng-content></div>
</div>

如果只有一个ng-content，不需要select属性。

ng-content在浏览器中会被 <div class=“heading”></div> 替代，如果不想要这个额外的div，可以使用ng-container替代这个div。

<!-- app.component.html -->
<bootstrap-panel><ng-container class="heading">Heading</ng-container><ng-container class="body">Body</ng-container>
</bootstrap-panel>
4.7 数据绑定容错处理
// app.component.ts
export class AppComponent {task = {person: {name: '张三'}}
}

<!-- 方式一 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<!-- 方式二 -->
<span>{{ task.person?.name }}</span>
4.8 全局样式
/* 第一种方式 在 styles.css 文件中 */
@import "~bootstrap/dist/css/bootstrap.css";
/* ~ 相对node_modules文件夹 */

<!-- 第二种方式 在 index.html 文件中  -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />

// 第三种方式 在 angular.json 文件中
"styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css","src/styles.css"
]

5. 指令 Directive

指令是 Angular 提供的操作 DOM 的途径。指令分为属性指令和结构指令。

属性指令：修改现有元素的外观或行为，使用 [] 包裹。

结构指令：增加、删除 DOM 节点以修改布局，使用*作为指令前缀

5.1 内置指令
5.1.1 *ngIf

根据条件渲染 DOM 节点或移除 DOM 节点。

<div *ngIf="data.length == 0">没有更多数据</div>

<div *ngIf="data.length > 0; then dataList else noData"></div>
<ng-template #dataList>课程列表</ng-template>
<ng-template #noData>没有更多数据</ng-template>
5.1.2 [hidden]

根据条件显示 DOM 节点或隐藏 DOM 节点 (display)。

<div [hidden]="data.length == 0">课程列表</div>
<div [hidden]="data.length > 0">没有更多数据</div>
5.1.3 *ngFor

遍历数据生成HTML结构

interface List {id: numbername: stringage: number
}list: List[] = [{ id: 1, name: "张三", age: 20 },{ id: 2, name: "李四", age: 30 }
]

<li*ngFor="let item of list;let i = index;let isEven = even;let isOdd = odd;let isFirst = first;let isLast = last;"></li>

<li *ngFor="let item of list; trackBy: identify"></li>

identify(index, item){return item.id; 
}
5.2 自定义指令

需求：为元素设置默认背景颜色，鼠标移入时的背景颜色以及移出时的背景颜色。

<div [appHover]="{ bgColor: 'skyblue' }">Hello Angular</div>

import { AfterViewInit, Directive, ElementRef, HostListener, Input } from "@angular/core"// 接收参的数类型
interface Options {bgColor?: string
}@Directive({selector: "[appHover]"
})
export class HoverDirective implements AfterViewInit {// 接收参数@Input("appHover") appHover: Options = {}// 要操作的 DOM 节点element: HTMLElement// 获取要操作的 DOM 节点constructor(private elementRef: ElementRef) {this.element = this.elementRef.nativeElement}// 组件模板初始完成后设置元素的背景颜色ngAfterViewInit() {this.element.style.backgroundColor = this.appHover.bgColor || "skyblue"}// 为元素添加鼠标移入事件@HostListener("mouseenter") enter() {this.element.style.backgroundColor = "pink"}// 为元素添加鼠标移出事件@HostListener("mouseleave") leave() {this.element.style.backgroundColor = "skyblue"}
}

6. 管道 Pipe

管道的作用是格式化组件模板数据。

6.1 内置管道
  1. date 日期格式化
  2. currency 货币格式化
  3. uppercase 转大写
  4. lowercase 转小写
  5. json 格式化json 数据
{{ date | date: "yyyy-MM-dd" }}
6.2 自定义管道

需求：指定字符串不能超过规定的长度

// summary.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'summary' 
});
export class SummaryPipe implements PipeTransform {transform (value: string, limit?: number) {if (!value) return null;let actualLimit = (limit) ? limit : 50;return value.substr(0, actualLimit) + '...';}
}

// app.module.ts
import { SummaryPipe } from './summary.pipe'
@NgModule({declarations: [SummaryPipe] 
});

7. 组件通讯

7.1 向组件内部传递数据
<app-favorite [isFavorite]="true"></app-favorite>

// favorite.component.ts
import { Input } from '@angular/core';
export class FavoriteComponent {@Input() isFavorite: boolean = false;
}

注意：在属性的外面加 [] 表示绑定动态值，在组件内接收后是布尔类型，不加 [] 表示绑定普通值，在组件内接收后是字符串类型。

<app-favorite [is-Favorite]="true"></app-favorite>

import { Input } from '@angular/core';export class FavoriteComponent {@Input("is-Favorite") isFavorite: boolean = false
}
7.2 组件向外部传递数据

需求：在子组件中通过点击按钮将数据传递给父组件

<!-- 子组件模板 -->
<button (click)="onClick()">click</button>

// 子组件类
import { EventEmitter, Output } from "@angular/core"export class FavoriteComponent {@Output() change = new EventEmitter()onClick() {this.change.emit({ name: "张三" })}
}

<!-- 父组件模板 -->
<app-favorite (change)="onChange($event)"></app-favorite>

// 父组件类
export class AppComponent {onChange(event: { name: string }) {console.log(event)}
}

8. 组件生命周期

在这里插入图片描述

  1. constructor

    Angular 在实例化组件类时执行, 可以用来接收 Angular 注入的服务实例对象。

    export class ChildComponent {constructor (private test: TestService) {console.log(this.test) // "test"}
}

  2. ngOnInit

    在首次接收到输入属性值后执行，在此处可以执行请求操作。

    <app-child name="张三"></app-child>

    export class ChildComponent implements OnInit {@Input("name") name: string = ""ngOnInit() {console.log(this.name) // "张三"}
}

  3. ngAfterContentInit

    当内容投影初始渲染完成后调用。

    <app-child><div #box>Hello Angular</div>
</app-child>

    export class ChildComponent implements AfterContentInit {@ContentChild("box") box: ElementRef<HTMLDivElement> | undefinedngAfterContentInit() {console.log(this.box) // <div>Hello Angular</div>}
}

  4. ngAfterViewInit

    当组件视图渲染完成后调用。

    <!-- app-child 组件模板 -->
<p #p>app-child works</p>

    export class ChildComponent implements AfterViewInit {@ViewChild("p") p: ElementRef<HTMLParagraphElement> | undefinedngAfterViewInit () {console.log(this.p) // <p>app-child works</p>}
}
8.2 更新阶段

  1. ngOnChanges

    1. 当输入属性值发生变化时执行，初始设置时也会执行一次，顺序优于 ngOnInit
    2. 不论多少输入属性同时变化，钩子函数只会执行一次，变化的值会同时存储在参数中
    3. 参数类型为 SimpleChanges，子属性类型为 SimpleChange
    4. 对于基本数据类型来说, 只要值发生变化就可以被检测到
    5. 对于引用数据类型来说, 可以检测从一个对象变成另一个对象, 但是检测不到同一个对象中属性值的变化，但是不影响组件模板更新数据。

    基本数据类型值变化

    <app-child [name]="name" [age]="age"></app-child>
<button (click)="change()">change</button>

    export class AppComponent {name: string = "张三";age: number = 20change() {this.name = "李四"this.age = 30}
}

    export class ChildComponent implements OnChanges {@Input("name") name: string = ""@Input("age") age: number = 0ngOnChanges(changes: SimpleChanges) {console.log("基本数据类型值变化可以被检测到")}
}

    引用数据类型变化

    <app-child [person]="person"></app-child>
<button (click)="change()">change</button>

    export class AppComponent {person = { name: "张三", age: 20 }change() {this.person = { name: "李四", age: 30 }}
}

    export class ChildComponent implements OnChanges {@Input("person") person = { name: "", age: 0 }ngOnChanges(changes: SimpleChanges) {console.log("对于引用数据类型, 只能检测到引用地址发生变化, 对象属性变化不能被检测到")}
}

  2. ngDoCheck：主要用于调试，只要输入属性发生变化，不论是基本数据类型还是引用数据类型还是引用数据类型中的属性变化，都会执行。

  3. ngAfterContentChecked：内容投影更新完成后执行。

  4. ngAfterViewChecked：组件视图更新完成后执行。

8.3 卸载阶段

  1. ngOnDestroy

    当组件被销毁之前调用, 用于清理操作。

    export class HomeComponent implements OnDestroy {ngOnDestroy() {console.log("组件被卸载")}
}

9. 依赖注入

9.1 概述

依赖注入 ( Dependency Injection ) 简称DI，是面向对象编程中的一种设计原则，用来减少代码之间的耦合度。

class MailService {constructor(APIKEY) {}
}class EmailSender {mailService: MailServiceconstructor() {this.mailService = new MailService("APIKEY1234567890")}sendMail(mail) {this.mailService.sendMail(mail)}
}const emailSender = new EmailSender()
emailSender.sendMail(mail)

EmailSender 类运行时要使用 MailService 类，EmailSender 类依赖 MailService 类，MailService 类是 EmailSender 类的依赖项。

以上写法的耦合度太高，代码并不健壮。如果 MailService 类改变了参数的传递方式，在 EmailSender 类中的写法也要跟着改变。

class EmailSender {mailService: MailServiceconstructor(mailService: MailService) {this.mailService = mailService;}
}
const mailService = new MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

在实例化 EmailSender 类时将它的依赖项通过 constructor 构造函数参数的形式注入到类的内部，这种写法就是依赖注入。

通过依赖注入降了代码之间的耦合度，增加了代码的可维护性。MailService 类中代码的更改再也不会影响 EmailSender 类。

9.2 DI 框架

Angular 有自己的 DI 框架，它将实现依赖注入的过程隐藏了，对于开发者来说只需使用很简单的代码就可以使用复杂的依赖注入功能。

在 Angular 的 DI 框架中有四个核心概念：

  1. Dependency：组件要依赖的实例对象，服务实例对象
  2. Token：获取服务实例对象的标识
  3. Injector：注入器，负责创建维护服务类的实例对象并向组件中注入服务实例对象。
  4. Provider：配置注入器的对象，指定创建服务实例对象的服务类和获取实例对象的标识。
9.2.1 注入器 Injectors

注入器负责创建服务类实例对象，并将服务类实例对象注入到需要的组件中。

  1. 创建注入器

    import { ReflectiveInjector } from "@angular/core"
// 服务类
class MailService {}
// 创建注入器并传入服务类
const injector = ReflectiveInjector.resolveAndCreate([MailService])

  2. 获取注入器中的服务类实例对象

    const mailService = injector.get(MailService)

  3. 服务实例对象为单例模式，注入器在创建服务实例后会对其进行缓存

    const mailService1 = injector.get(MailService)
const mailService2 = injector.get(MailService)console.log(mailService1 === mailService2) // true

  4. 不同的注入器返回不同的服务实例对象

    const injector = ReflectiveInjector.resolveAndCreate([MailService])
const childInjector = injector.resolveAndCreateChild([MailService])const mailService1 = injector.get(MailService)
const mailService2 = childInjector.get(MailService)console.log(mailService1 === mailService2)

  5. 服务实例的查找类似函数作用域链，当前级别可以找到就使用当前级别，当前级别找不到去父级中查找

    const injector = ReflectiveInjector.resolveAndCreate([MailService])
const childInjector = injector.resolveAndCreateChild([])const mailService1 = injector.get(MailService)
const mailService2 = childInjector.get(MailService)console.log(mailService1 === mailService2)
9.2.2 提供者 Provider

  1. 配置注入器的对象，指定了创建实例对象的服务类和访问服务实例对象的标识。

    const injector = ReflectiveInjector.resolveAndCreate([{ provide: MailService, useClass: MailService }
])

  2. 访问依赖对象的标识也可以是字符串类型

    const injector = ReflectiveInjector.resolveAndCreate([{ provide: "mail", useClass: MailService }
])
const mailService = injector.get("mail")

  3. useValue

    const injector = ReflectiveInjector.resolveAndCreate([{provide: "Config",useValue: Object.freeze({APIKEY: "API1234567890",APISCRET: "500-400-300"})}
])
const Config = injector.get("Config")

将实例对象和外部的引用建立了松耦合关系，外部通过标识获取实例对象，只要标识保持不变，内部代码怎么变都不会影响到外部。

10. 服务 Service

10.1 创建服务
import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class TestService { }

export class AppComponent {constructor (private testService: TestService) {}
}
10.2 服务的作用域

使用服务可以轻松实现跨模块跨组件共享数据，这取决于服务的作用域。

  1. 在根注入器中注册服务，所有模块使用同一个服务实例对象。

    import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})export class CarListService {
}

  2. 在模块级别注册服务，该模块中的所有组件使用同一个服务实例对象。

    import { Injectable } from '@angular/core';
import { CarModule } from './car.module';@Injectable({providedIn: CarModule,
})export class CarListService {
}

    import { CarListService } from './car-list.service';@NgModule({providers: [CarListService],
})
export class CarModule {
}

  3. 在组件级别注册服务，该组件及其子组件使用同一个服务实例对象。

    import { Component } from '@angular/core';
import { CarListService } from '../car-list.service.ts'@Component({selector:    'app-car-list',templateUrl: './car-list.component.html',providers:  [ CarListService ]
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/42388.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

花所Flower非小号排名20名下载花所Flower

花所Flower非小号排名20名下载花所Flower

1、Flower花所介绍 Flower花所是一家新兴的数字货币交易平台&#xff0c;致力于为全球用户提供安全、便捷的交易体验。平台以其强大的技术支持和丰富的交易产品闻名&#xff0c;为用户提供多样化的数字资产交易服务&#xff0c;涵盖了主流和新兴数字货币的交易需求。 2. Flowe…
阅读更多...
怎样让家长单独查到自己孩子的期末成绩？

怎样让家长单独查到自己孩子的期末成绩？

期末考试的钟声已经敲响&#xff0c;随着最后一份试卷的收卷&#xff0c;学生们的紧张情绪渐渐平息。然而&#xff0c;对于老师们来说&#xff0c;这仅仅是另一个忙碌周期的开始。成绩的统计、分析、反馈&#xff0c;每一项工作都不容小觑。尤其是将成绩单一一私信给家长&#…
阅读更多...
计算机图形学bezier曲线曲面B样条曲线曲面

计算机图形学bezier曲线曲面B样条曲线曲面

b站视频 文章目录 曲线曲面基本理论曲线&#xff08;面&#xff09;参数表示1、显示、隐式和参数表示2、显式或隐式表示存在的问题3、参数方程 曲线曲面基本理论 计算机图形学三大块内容:光栅图形显示、几何造型技术、真实感图形显示。光栅图形学是图形学的基础&#xff0c;有…
阅读更多...
建投数据入选“2024年中国最佳信创企业管理软件厂商”

建投数据入选“2024年中国最佳信创企业管理软件厂商”

近日&#xff0c;建投数据凭借国产化自主知识产权、完备的信创资质及信创软硬件环境全栈适配能力&#xff0c;入选第一新声联合天眼查发布的“2024年中国最佳信创厂商系列榜单”细分行业榜之“最佳信创企业管理软件厂商”。 本次最佳信创厂商系列榜单评选&#xff0c;包括综合榜…
阅读更多...
css样式学习样例之边框

css样式学习样例之边框

成品效果 边框固定 .login_box{width: 450px;height: 300px;background-color: aliceblue;border-radius: 3px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); }这段CSS代码定义了一个名为.login_box的类的样式&#xff0c;它主要用于创建一个登录框…
阅读更多...
人工智能在病理组学虚拟染色中的应用｜文献精析·24-07-07

人工智能在病理组学虚拟染色中的应用｜文献精析·24-07-07

小罗碎碎念 本期文献精析&#xff0c;分享的是一篇关于深度学习在虚拟染色技术中应用于组织学研究的综述。 角色姓名单位&#xff08;中文&#xff09;第一作者Leena Latonen东芬兰大学&#xff08;QS-552&#xff09;生物医学研究所通讯作者Pekka Ruusuvuori图尔库大学&#…
阅读更多...
# Sharding-JDBC 从入门到精通（10）- 综合案例（三）查询商品与测试及统计商品和总结

# Sharding-JDBC 从入门到精通（10）- 综合案例（三）查询商品与测试及统计商品和总结

Sharding-JDBC 从入门到精通&#xff08;10&#xff09;- 综合案例&#xff08;三&#xff09;查询商品与测试及统计商品和总结 一、Sharding-JDBC 综合案例-查询商品-dao 1、查询商品&#xff1a;Dao 实现&#xff1a;在 ProductDao 中定义商品查询方法&#xff1a; //查询商…
阅读更多...
基于8255的交通灯设计

基于8255的交通灯设计

&#x1f3c6;本文收录于「Bug调优」专栏&#xff0c;主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案&#xff0c;希望能够助你一臂之力&#xff0c;帮你早日登顶实现财富自由&#x1f680;&#xff1b;同时&#xff0c;欢迎大家关注&&收藏&&…
阅读更多...
信号与系统笔记分享

信号与系统笔记分享

文章目录 一、导论信号分类周期问题能量信号和功率信号系统的线性判断时变&#xff0c;时不变系统因果系统判断记忆性系统判断稳定性系统判断 二、信号时域分析阶跃函数冲激函数取样性质四种特性1 筛选特性2 抽样特性3 展缩特性4 卷积特性卷积作用 冲激偶函数奇函数性质公式推导…
阅读更多...
Spring Boot基础篇

Spring Boot基础篇

快速上手 SpringBoot是由Pivotal团队提高的全新框架&#xff0c;其设计目的是用来简化Spring应用的初始化搭建以及开发过程 入门案例 在Idea创建 创建时要选择Spring Initializr。 Server URL为要连接的网站&#xff0c;默认为官网start.spring.io&#xff08;访问速度慢&…
阅读更多...
数字化精益生产系统--IFS财务管理系统

数字化精益生产系统--IFS财务管理系统

IFS财务管理系统是一款功能丰富、高效且灵活的企业财务管理软件&#xff0c;广泛应用于多个行业和不同规模的企业中。以下是对IFS财务管理系统的功能设计&#xff1a;
阅读更多...
SpringBoot测试类注入Bean失败的原因

SpringBoot测试类注入Bean失败的原因

针对SpringBoot的测试类&#xff0c;2.2版本之前和之后是不一样的。 2.2版本之后 导包pom.xml 添加test依赖 <!-- starter-test&#xff1a;junit spring-test mockito --> <dependency><groupId>org.springframework.boot</groupId><artifac…
阅读更多...
【论文阅读】AsyncDiff: Parallelizing Diffusion Models by Asynchronous Denoising

【论文阅读】AsyncDiff: Parallelizing Diffusion Models by Asynchronous Denoising

论文&#xff1a;2406.06911 (arxiv.org) 代码&#xff1a;czg1225/AsyncDiff: Official implementation of "AsyncDiff: Parallelizing Diffusion Models by Asynchronous Denoising" (github.com) 简介&#xff1a;异步去噪并行化扩散模型。提出了一种新的扩散模…
阅读更多...
【Java】垃圾回收学习笔记（一）：判定对象的存活或死亡？Root Search 根可达算法

【Java】垃圾回收学习笔记（一）：判定对象的存活或死亡？Root Search 根可达算法

文章目录 1. 引用计数法优点缺点 2. 可达性分析 Root Search2.1 那些对象是GC Roots2.2 引用的分类 3. 回收方法区Reference 最近上班地铁上偶尔看看书&#xff0c;周末有空理一下&#xff0c;做个笔记。 下面说说GC过程中如何判断对象是否存活。 1. 引用计数法 用于微软COM&a…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （297）-- 算法导论22.1 1题

文心一言 VS 讯飞星火 VS chatgpt （297）-- 算法导论22.1 1题

一、给定有向图的邻接链表&#xff0c;需要多长时间才能计算出每个结点的出度(发出的边的条数)&#xff1f;多长时间才能计算出每个结点的入度(进入的边的条数)&#xff1f;如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 计算出度 对于有向图的邻接链表表示&a…
阅读更多...
基于OpenCv的快速图片颜色交换，轻松实现图片背景更换

基于OpenCv的快速图片颜色交换，轻松实现图片背景更换

图片颜色更换 图片颜色转换 当我们有2张图片，很喜欢第一张图片的颜色，第2张图片的前景照片，很多时候我们需要PS进行图片的颜色转换，这当然需要我们有强大的PS功底，当然小编这里不是介绍PS的，我们使用代码完全可以代替PS 进行图片的颜色转换 图片颜色转换步骤： 步骤…
阅读更多...
MySQL高级----详细介绍MySQL中的锁

MySQL高级----详细介绍MySQL中的锁

概述 锁是计算机协调多个进程或线程并发访问某一资源的机制&#xff0c;为了解决数据访问的一致性和有效性问题。在数据库中&#xff0c;除传统的计算资源(CPU、RAN、I/O&#xff09;的争用以外&#xff0c;数据也是一种供许多用户共享的资源。如何保证数据并发访问的一致性、…
阅读更多...
U盘非安全退出后的格式化危机与高效恢复策略

U盘非安全退出后的格式化危机与高效恢复策略

在数字化时代&#xff0c;U盘作为数据存储与传输的重要工具&#xff0c;其数据安全备受关注。然而&#xff0c;一个常见的操作失误——U盘没有安全退出便直接拔出&#xff0c;随后再插入时却遭遇“需要格式化”的提示&#xff0c;这不仅让用户措手不及&#xff0c;更可能意味着…
阅读更多...
kubeadm快速部署k8s集群

kubeadm快速部署k8s集群

文章目录 Kubernetes简介1、k8s集群环境2、linux实验环境初始化【所有节点】3、安装docker容器引擎【所有节点】4、安装cri-dockerd【所有节点】5、安装 kubeadm、kubelet、kubectl【所有节点】6、部署 k8s master 节点【master节点】7、加入k8s Node 节点【node节点】8、部署容…
阅读更多...
【JavaWeb程序设计】JSP访问数据库

【JavaWeb程序设计】JSP访问数据库

目录 一、安装Mysql&#xff0c;设置好数据库的账户和密码 二、JSP访问数据库的步骤 ①加载数据库驱动程序&#xff1b; ②建立连接对象&#xff1b; ③创建语句对象&#xff1b; ④获得结果集&#xff1b; ⑤关闭有关连接对象。 三、实现个人信息的查询和展示 1、新增…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023